Chapter 1: Interfacing with a directive using isolate scope - @

by billy roberts

HTML

<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="MainCtrl">
        <div>controller: {{data.controllerData }}</div>
        <div parent-directive 
             fromctrler="data.controllerData">
        </div>   
    </div>
    <script type="text/ng-template" 
            id="parent.html">
         parent: {{fromctrler}}         
        <!-- don't use fromparent="{{data.parentData}} if it's 2 way binding!! -->
        <div child-directive 
             fromctrler2="fromctrler" 
             fromparent="data.parentData">                     
        </div>            
    </script>  
    <script type="text/ng-template" id="child.html">
        nested: {{fromctrler2}}
        <br>
        nested: {{fromparent}}
        <br>
        nested: {{childData}}    
    </script>    
</div>

JavaScript

//isolated scopes
//1-get a dot & prototypical inheritance
//2-template cache
//3-data inheritance in isolated child scopes
angular.module('myApp', [])
.controller('MainCtrl', function ($log, $scope) {
    $scope.data = {};
    $scope.data.controllerData = "data from the controller";
    
})
.directive('parentDirective', function () {
    return {
        templateUrl: 'parent.html',
        scope: {
            fromctrler: "="
        },
        link: function (scope) {
            scope.data = {};
            scope.data.parentData = "data from the parent";
        }
    };
})
.directive('childDirective', function () {
    return {  
        templateUrl: 'child.html',
        scope: {
            //only two way can be an object
            //data from MainCtrl through parentDirective
            fromctrler2: "=", //don't use {{ }} if it's 2 way!
            fromparent: "="
        },
        link: function (scope) {   
            scope.childData = "data from the child";
        }
    };
});