本文是對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共享到外部，隻需要将”@”改為”=”，并且将對應的指令的{{}}删掉即可。
![leetcode電話号碼的字母組合[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)