[Angular] Isolate Scope "@" 

var app = angular.module("drinkApp", []);

/**
    scope:{flavor: "@"} has the same affect as
    link: function(scope, element, attrs){
        scope.flavor = attrs.flavor;
    }
    Because attrs.flavor is a string,
    @ : take affect like attrs
*/
app.directive("drink", function() {
  return {
    scope:{flavor: "@"},
    template: '<div>{{flavor}}</div>'//,
    /*link: function(scope, element, attrs){
        scope.flavor = attrs.flavor; //attrs.flavor="strawberrey"
    }*/
  }
});

/*
    <div ng-controller="AppCtrl" drink flavor="{{ctrlFlavor}}"></div>
    If controller wants to talk with directive, drink attribute should be added
    into the code, otherwise wont work;
    
    since @ works as attrs, will get attrs.flavor = {{ctrlFlavor}},
    attrs.flavor = "Blackberry"
*/
app.controller("AppCtrl", function($scope){
    $scope.ctrlFlavor = "Blackberry"
});

 

<!DOCTYPE html>
<html>
    <head>
        <title>Angular Directive</title>
        <link rel="stylesheet" href="foundation.min.css" />
        <script src="angular.min.js"></script>
        <script src="main.js"></script>
    </head>
    <body >
        <div ng-app="drinkApp">
            <div drink flavor="strawberrey"></div>
            <hr/>
            <div ng-controller="AppCtrl" drink flavor={{ctrlFlavor}}></div>
        </div>
        </div>
    </body>
</html>

posted @ 2014-08-14 16:51  Zhentiw  阅读(212)  评论(0)    收藏  举报