angular directive scope

by Richard Hunter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.min.js"></script>
<div ng-controller="MainCtrl">
    <foo a="this is alpha {{ blah }}" b="blah" c="blah = 'not blah' "></foo>   
    
    <label>blah: <input type="text" ng-model="blah"/></label>
</div>



<script type="text/ng-template" id="foo.html">
    <h1>{{ fractal.alpha }}</h1>
    <h2>{{ fractal.beta }}</h2>
    <h3>{{ spring }}</h3>
    <button ng-click="fractal.gamma()">click</button>
    this is the foo template
</script>

CSS

child-directive {
    width : 100px;
    height : 100px;
    display : inline-block;
}

JavaScript

angular.module('myapp', [])

.controller('MainCtrl', function($scope) {
    $scope.blah = "blahblah";
    
})

.directive('foo', function () {
    return {
        templateUrl : 'foo.html',
        controllerAs : 'fractal',
        bindToController : true,
        controller : function ($scope) {
            $scope.spring = 'spring';
        },
        scope : {
            alpha : '@a', // binds alpha to value of a. value may be interpolated.
            beta : '=b',  // binds beta to scope property with same name as value of b
            gamma : '&c'  // binds gamma to a function which wraps the expression contained within c that executes in the parent scope
            
        }
        
    };
})

angular.bootstrap(document, ['myapp']);