AngularJS在自訂指令中傳遞Model

AngularJS在自訂指令中傳遞Model

本文是對AngularJS權威指南8.2節的理解，書中的解釋比較混亂，花了一些時間才理解作者表達的意思。

假如我們建立了一個指令，用於產生一個包含input和a標籤。如果我們想input標籤的內容通過ng-model的方式傳遞出去（例如傳遞到指令外的另一個input），我們可能會這麼寫：

<script src="angular.js"></script>   <script> angular.module('myApp', []) .directive('myDirective', function() { return { restrict: 'A', replace: true, scope: { myUrl: '@someAttr', myLinkText: '@' }, template: '\ \ \ {{myLinkText}}\ \ ' } }) </script>

產生的HTML如所示：

但是這不能達到我們的預期：資料只能從第一個input傳遞到第二個input，而不能從第二個input傳遞到第一個input。

原因是指令內部有獨立的範圍，指令內的{{myUrl}}不能直接被外部共用。

將代碼做如下修改，可以實現被外部共用，注意修改的部分有注釋：

<script src="angular.js"></script>   <script> angular.module('myApp', []) .directive('myDirective', function() { return { restrict: 'A', replace: true, scope: { //***************************************** myUrl: '=someAttr',//@修改為了= //***************************************** myLinkText: '@' }, template: '\ \ \ {{myLinkText}}\ \ ' } }) </script> 總結

指令內部model共用到外部，只需要將”@”改為”=”，並且將對應的指令的{{}}刪掉即可。