JSFiddle - React, Tailwind, and code Playground

by Anam Ansari

HTML

<div ng-app="myapp">
    <div ng-controller="mainCtrl">{{name}}
        <br/>
        <br/>
        <my-list my-name="name" my-color="red" my-calling="greet"></my-list>
        <my-list my-name="name" my-color="blue" my-calling="greet"></my-list>
    </div>
    <script type="text/ng-template" id="temp1.html">
        <br/> M coming from Directive--- > name is {{myName}} 
        <br/> <button ng-click='finish()'> Click me
        <div ng-transclude> </div></button>
    </script>
</div>

JavaScript

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

myapp.controller('mainCtrl', ['$scope', function ($scope) {
    $scope.name = 'Tobias';
    $scope.greet = function (a) {
        alert('Hello dear '+a);
    };
}]);

myapp.directive('myList', function () {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {
            myName: '=',
            myColor: '@',
            myCalling: '&'
        },
        replace: false,
        templateUrl: 'temp1.html',
        controller: function ($scope, $element, $attrs) {
            //console.log('click  is '+$attrs.myCalling);
            //console.log('Attribute color is '+$attrs.myColor);
            $element.css('color', $attrs.myColor);
            
            $scope.finish = function () {
                var func = $scope.myCalling();                
                func( $attrs.myColor);
            }
        }
    };
});

myapp.directive('myDialog', function () {
    return {
        restrict: 'E',
        transclude: true,
        scope: {},
        template: 'my-dialog.html',
        link: function (scope, element) {
            scope.name = 'Jeff';
        }
    };
});