Angular Isolate Scope =

by Varun Nath

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.1.1/css/foundation.min.css">
<body ng-app="drinkApp">

    
    <div ng-controller="DrinkCtrl">
        <input type="text" ng-model="CtrlFlavour"/>

    <drink flavour="{{CtrlFlavour}}"></drink>

    </div>

    

</body>

JavaScript

//load the module and the dependencies 
var app = angular.module('drinkApp',[]);

app.controller('DrinkCtrl',function ($scope){
    $scope.CtrlFlavour = 'Strawberry';
});


app.directive('drink',function(){

    return{
        scope:{
            flavour:'@'//binds the string in the flavour attribute 
        },
        restrict:"E",
        template:'<h1>{{flavour}}</h1>'
    };
   
});

/* The following is the long form of using the @ 
 app.directive('drink',function(){

    return{
        scope{},
        restrict:"E",
        link: function (scope,element,attrs) {
            scope.flavour = attrs.flavour
        }
    };   
*/