本文是對AngularJS權威指南8.2節的理解，書中的解釋比較混亂，花了一些時間才理解作者表達的意思。
假如我們創建了一個指令，用於生成一個包含input和a標簽。如果我們想input標簽的內容通過ng-model的方式傳遞出去（例如傳遞到指令外的另一個input），我們可能會這么寫：
<!doctype html> <html ng-app="myApp"> <head> <script src="angular.js"></script> </head> <body> <input type="text" ng-model="myUrl"/> <div my-directive some-attr="{{myUrl}}" my-link-text="Click me to go to Google"></div> <script> angular.module('myApp', []) .directive('myDirective', function() { return { restrict: 'A', replace: true, scope: { myUrl: '@someAttr', myLinkText: '@' }, template: '\ <div>\ <input type="text" ng-model="myUrl" />\ <a href="{{myUrl}}">{{myLinkText}}</a>\ </div>\ ' } }) </script> </body> </html>生成的HTML如下圖所示：
但是這不能達到我們的預期：數據只能從第一個input傳遞到第二個input，而不能從第二個input傳遞到第一個input。
原因是指令內部有獨立的作用域，指令內的{{myUrl}}不能直接被外部共享。
將代碼做如下修改，可以實現被外部共享，注意修改的部分有注釋：
<!doctype html> <html ng-app="myApp"> <head> <meta charset="utf-8"/> <script src="angular.js"></script> </head> <body> <input type="text" ng-model="myUrl"/> <!--*****************************************--> <!--{{myUrl}}改為了myUrl--> <div my-directive some-attr="myUrl" my-link-text="Click me to go to Google"></div> <!--*****************************************--> <script> angular.module('myApp', []) .directive('myDirective', function() { return { restrict: 'A', replace: true, scope: { //***************************************** myUrl: '=someAttr',//@修改為了= //***************************************** myLinkText: '@' }, template: '\ <div>\ <input type="text" ng-model="myUrl" />\ <a href="{{myUrl}}">{{myLinkText}}</a>\ </div>\ ' } }) </script> </body> </html>總結
指令內部model共享到外部，只需要將”@”改為”=”，並且將對應的指令的{{}}刪掉即可。