标签：
1. What are Directives
Directives are one of the most powerful features of AngularJS. You can imagine them as building blocks ( aka re-usable components ) of any AngularJS application. Mastering all the directives, is totally out of this article’s scope. For that, I would really recommend this book; it covers everything you need to know about directives. Here, we’ll discuss one aspect of directives called : “Directive scope”.
var app = angular.module("test",[]); app.directive("myDirective",function(){ return { restrict: "EA", scope: true, link: function(scope,elem,attr){ // code goes here ... } } });
2. Scopes in AngularJS
a. Scope : False ( Directive uses its parent scope )
var app = angular.module("test",[]); app.controller("Ctrl1",function($scope){ $scope.name = "Harry"; $scope.reverseName = function(){ $scope.name = $scope.name.split(‘‘).reverse().join(‘‘); }; }); app.directive("myDirective", function(){ return { restrict: "EA", scope: false, template: "<div>Your name is : {{name}}</div>"+ "Change your name : <input type=‘text‘ ng-model=‘name‘ />" }; });
b. Scope : True ( Directive gets a new scope )
var app = angular.module("test",[]); app.controller("Ctrl1",function($scope){ $scope.name = "Harry"; $scope.reverseName = function(){ $scope.name = $scope.name.split(‘‘).reverse().join(‘‘); }; }); app.directive("myDirective", function(){ return { restrict: "EA", scope: true, template: "<div>Your name is : {{name}}</div>"+ "Change your name : <input type=‘text‘ ng-model=‘name‘ />" }; });
The "name" inside template, when update it, it won‘t affect the name in controller.
c. Scope : { } ( Directive gets a new isolated scope )
Then "name" inside Directive have nothing with the "name" inside controller
3. Can we pass some values from the parent scope to the directives now?
Yes ! Not only that, we might need to handle situations like invoking callbacks in parent scope, two-way binding between parent & directives scope ..etc
<div ng-app="app"> <div class="parent" ng-controller="MainCtrl"> <div class="line"> Name inside parent scope is: <strong>{{name}}</strong> <input type="button" ng-click="reverseName()" value="Reverse name" /> </div> <div class="line"> Color inside parent scope is: <strong style="color:{{color}}">{{color|uppercase}}</strong> <input type="button" ng-click="randomColor()" value="Randomize color" /> </div> <div class="directive" my-directive name="{{name}}" color="color" reverse="reverseName()" ></div> </div> </div>
var app = angular.module("app", []); app.controller("MainCtrl", function( $scope ){ $scope.name = "Harry"; $scope.color = "#333333"; $scope.reverseName = function(){ $scope.name = $scope.name.split("").reverse().join(""); }; $scope.randomColor = function(){ $scope.color = ‘#‘+Math.floor(Math.random()*16777215).toString(16); }; }); app.directive("myDirective", function(){ return { restrict: "EA", scope: { name: "@", color: "=", reverse: "&" }, template: [ "<div class=‘line‘>", "Name : <strong>{{name}}</strong>; Change name:<input type=‘text‘ ng-model=‘name‘ /><br/>", "</div><div class=‘line‘>", "Color : <strong style=‘color:{{color}}‘>{{color|uppercase}}</strong>; Change color:<input type=‘text‘ ng-model=‘color‘ /><br/></div>", "<br/><input type=‘button‘ ng-click=‘reverse()‘ value=‘Reverse Name‘/>" ].join("") }; });
There’re 3 types of prefixes AngularJS provides.
1. "@" ( Text binding / one-way binding )
2. "=" ( Direct model binding / two-way binding )
3. "&" ( Behaviour binding / Method binding )标签：
原文地址：http://www.cnblogs.com/yk00/p/5142937.html
