JSFiddle - React, Tailwind, and code Playground

by Raul Bojalil

HTML

Custom directives test
<div ng-app="directivesModule" ng-controller="CustomersController">
  <div my-directive></div>
  <div my-other-directive title="Click me!"></div>
</div>

JavaScript

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

app.controller('CustomersController', ['$scope', function ($scope) {
    var counter = 0;
    $scope.customer = {
        name: 'David',
        street: '1234 Anywhere St.'
    };
    
    $scope.customers = [
        {
            name: 'David',
            street: '1234 Anywhere St.'
        },
        {
            name: 'Tina',
            street: '1800 Crest St.'
        },
        {
            name: 'Michelle',
            street: '890 Main St.'
        }
    ];

    $scope.addCustomer = function () {
        counter++;
        $scope.customers.push({
            name: 'New Customer' + counter,
            street: counter + ' Cedar Point St.'
        });
    };

    $scope.changeData = function () {
        counter++;
        $scope.customer = {
            name: 'James',
            street: counter + ' Cedar Point St.'
        };
    };
}]);


app.directive('myDirective', function () {
    return {
        template: 'Name: {{customer.name}}<br /> Street: {{customer.street}}'
    };
});

app.directive('myOtherDirective', function () {
    return {
        restrict: 'EA', //E = element, A = attribute, C = class, M = comment         
        //scope : false ( Directive uses its parent scope )
        //scope : true ( Directive gets a new scope )
        //scope : { } ( Directive gets a new isolated scope )
        scope: {
            //@ reads the attribute value, = provides two-way binding, & works with functions
            //Other types of binding:
            //1. "@"   (  Text binding / one-way binding )
						//2. "="   ( Direct model binding / two-way binding )
						//3. "&"   ( Behaviour binding / Method binding  )
            title: '@' 
        },
        template: '<div>{{ title }} </div>',
        //templateUrl: 'mytemplate.html',
        controller: null, //Embed a custom controller in the directive
        link: function ($scope, element, attrs) { 
        
       ...