JSFiddle - React, Tailwind, and code Playground

by gabriela b

HTML

<div ng-app='directivesModule' >
    <div ng-controller='CustomersController'>
       
        <div my-shared-scope></div>
Html Name : {{customer.name}} 
<br />
Html Street: {{customer.street}}
</div>
    </div>

JavaScript

var app = angular.module('directivesModule', []);
angular.module('directivesModule').directive('mySharedScope', function () {
    return {
        template: 'Directive: Name: {{customer.name}}<br /> Street: {{customer.street}} Media: {{media}}'
    };
});

app.controller('CustomersController', ['$scope', function ($scope) {
    var counter = 0;
    $scope.media  = 2018;
    $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.'
        };
    };
}]);