引入主題背景:angular 的指令配置中的template可以直接使用硬編碼寫相應的代碼,不過也可以根據變量,進行動態更新。那么需要用到那些變量,因用法的不同,所以需要設置合適的綁定策略。
一、@ 綁定策略
@ 綁定策略,它的作用就是能把指令配置的獨立Scope下變量的值等於根據@綁定的指令屬性的值。(指令屬性的值可以使用表達式,但是得出來的值一定是字符串。)
1、上代碼:
html代碼
<!DOCTYPE html>
<htmllang="en"ng-app="myApp">
<head>
<metacharset="UTF-8">
<title>myDirective</title>
</head>
<body>
<inputtype="text"ng-model="myUrl">
<divmy-directivemy-url="{{myUrl}}"my-link-text="click me"></div> ①
</body>
<scriptsrc="../../common/angular-1.0.1.min.js"></script>
<scriptsrc="./demo1.js"></script>
</html>
js代碼
angular.module('myApp',[])
.directive('myDirective',function(){
return{
restrict:'A',//屬性方式
replace:true,
scope:{
myUrl:'@',//@綁定策略(默認綁定到 my-url指令屬性)
myLinkText:'@'//@綁定策略(默認綁定到 my-link-text 指令屬性)
},
template:'<a href="{{myUrl}}">{{ myLinkText }}</a>'
}
});
2、 解釋:
-
在上面的代碼中,我創建了一個指令
myDirective
該指令創建了兩個變量 myUrl、myLinkText,並且這倆個變量都是采用@綁定策略
。 -
說一下,不管是
@
、=
還是&
綁定策略,它們都有一個默認的方式,以@綁定策略為例,如上面代碼那么樣:myUrl:'@'
,直接用一個@
表示綁定的方式,它就會默認得將指令屬性my-url的值賦值給myUrl變量。當然,你不想使用默認的方式,也就是說,你不想myUrl變量綁定my-url的值,而想要綁定其它屬性名的值,那么你可以在@
后加上你希望的屬性名(格式要求:駝峰式)。如,我想講myUrl綁定到<myDirective></myDirective>
指令的some-attr屬性的值,那么你可以這樣寫:myUrl:'@someAttr'
。 -
那么我們知道了指令的myUrl變量的值是如何來的,那么我們要如何在template中使用它呢?這個很簡單,看上面的代碼就能很明白了,我們在template中的代碼中需要用表達式的方式對其引用
{{myUrl}}
,這樣我們就能夠使用到myUrl變量的值了~
3、 小結:
- @ 綁定策略只能綁定(或者理解成傳遞)字符串值。要想傳遞方法(&)或者實現雙向數據綁定(=)等操作,就得需要使用其它倆樣的綁定方式咯
教程對@、=、&的講解:
為了讓新的指令作用域可以訪問當前本地作用域中的變量,需要使用下面三種別名中的一種。
1. 本地作用域屬性:使用@符號將本地作用域同DOM屬性的值進行綁定。指令內部作用域可以使用外部作用域的變量:
@ (or @attr)
現在,可以在指令中使用綁定的字符串了。
2. 雙向綁定:通過=可以將本地作用域上的屬性同父級作用域上的屬性進行雙向的數據綁定。就像普通的數據綁定一樣,本地屬性會反映出父數據模型中所發生的改變。
= (or =attr)
3. 父級作用域綁定 通過&符號可以對父級作用域進行綁定,以便在其中運行函數。意味着對這個值進行設置時會生成一個指向父級作用域的包裝函數。
要使調用帶有一個參數的父方法,我們需要傳遞一個對象,這個對象的鍵是參數的名稱,值是要傳遞給參數的內容。
& (or &attr)