JSFiddle - React, Tailwind, and code Playground

by gogirl

HTML

<html ng-app='app'>
    <body ng-controller='main'>
        <input size="30" ng-model='age' my-directive='age' />
        <input size="30" ng-model='name' my-directive='age' />
        <div>name: {{name}} </div>
        <div>directive value: {{directiveValue}}</div>
        <div>directive value: {{name}}</div>
        <div>directive value: {{age }} </div>
        <my-directive></my-directive>
    </body>
</html>

CSS

body { padding: 40px; }
input, div { margin: 5px; padding: 5px; }

JavaScript

var app = angular.module('app', []);

app.directive('myDirective', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ctrl) {
            var d=scope.directiveValue = scope.$eval(attrs.myDirective);
       
        }        
    };
});

  
app.controller('main', function($scope) {
    $scope.name = "My Name";
    $scope.age = "56"; 
});