看到自定義標簽的文檔時，文檔作者解釋的能力實在太弱，也可能是本人太笨，一下繞不過來。 看了一個stackoverflow答案，才算明白，在此貼出翻譯，以供大家參考。 1: app.directive('mytag',function() { 2: return { 3: restrict: 'E',... ...
看到自定義標簽的文檔時，文檔作者解釋的能力實在太弱，也可能是本人太笨，一下繞不過來。 看了一個stackoverflow答案，才算明白，在此貼出翻譯，以供大家參考。
1: app.directive('mytag',function() {
2: return {
3: restrict: 'E',
4: template: '<div>' +
5: '<input ng-model="controltype"/>' +
6: '<button ng-click="controlfunc()">Parent Func</button>' +
7: '<p>{{controlval}}</p>' +
8: '</div>',
9: scope: {
10: /* make typeattribute="whatever" bind two-ways (=)
11: $scope.whatever from the parent to $scope.controltype
12: on this directive's scope */
13: controltype: '=typeattribute',
14: /* reference a function from the parent through
15: funcattribute="somefunc()" and stick it our
16: directive's scope in $scope.controlfunc */
17: controlfunc: '&funcattribute',
18: /* pass a string value into the directive */
19: controlval: '@valattribute'
20: },
21: controller: function($scope) {
22: }
23: };
24: });
25:
26: <div ng-controller="ParentCtrl">
27: <!-- your directive -->
28: <mytag typeattribute="parenttype" funcattribute="parentFn()" valattribute="Wee, I'm a value"></mytag>
29: <!-- write out your scope value -->
30: {{parenttype}}
31: </div>
32:
33:
34: app.controller('ParentCtrl', function($scope){
35: $scope.parenttype = 'FOO';
36: $scope.parentFn = function() {
37: $scope.parenttype += '!!!!';
38: }
39: });
The magic is mostly in the scope: declaration in your directive definition. having any scope: {} in there will "isolate" the scope from the parent, meaning it gets it's own scope... without that, it would use the parent's scope. The rest of the magic is in the scope's properties: scope: { 'internalScopeProperty' : '=externalAttributeName' }... where the = represents a two way binding scenario. If you change that = to a @ you'll see it just allows you to pass a string as an attribute to the directive. The & is for executing functions from the parent scope's context.
I hope that helps.
竅門在scope： 在你自己的標簽定義中，聲明的任何 scope : {} 都會從父scope中‘隔離’出只屬於自己的scope， 如果沒有 scope: {}定義，就會直接使用父scope，其餘的特點就是scope屬性定義， scope{ internalScopeProperty’ : ‘=externalAttributeName’ } 這裡externalAttributeName是屬性名， =代表雙向綁定的場景， 如果把 = 改成 @， 你就只允許向標簽傳遞一個字元串（這個後面在詳細講）， 而 & 在這裡就是執行一個父scope上下文的function。
I struggled a bit with this documentation too when first getting into angular, but I will make an attempt try to clarify things for you. First, when using this scope property, it creates an "isolated scope." All this means is that it won't inherit any properties from parent scopes, and so you don't have to worry about any collisions within the scope.
在入門angular開始讀到本文檔時，我也遇到一些坑，不過我將試圖在下麵解釋清楚。 首先當使用scope時， 它創建的是一個‘隔離的scope’， 這就意味著它不從父scope繼承任何屬性， 這就是說你不需從父scope哪裡繼承任何屬性， 你不需要擔心在獨立隔離的scope里發生任何衝突
Now, the '@' notation means that the evaluated value in the attribute will automatically get bound into your scope for the directive. So, <my-directive foo="bar" /> would end up with the scope having a property called foo that holds the string "bar". You could also do something like <my-directive foo="{{bar}}" And then the evaluated value of {{bar}} will be bound to the scope. Since attributes are always strings, you will always end up with a string for this property in the scope when using this notation.
現在‘@’符號表示標簽里經過求值的屬性會自動綁定到你的scope裡面。 因此， <my-directive foo=”bar” />將會在scope里有個foo的屬性裝著字元串“bar”, 你可能也想這樣寫<my-directive foo=”{{bar}}”/>, 那麼求值後的{{bar}} 將會綁定到scope中， 因為屬性總是字元串，用這種寫法你講總會看到這個屬性的值是字元串。
The '=' notation basically provides a mechanism for passing an object into your directive. It always pulls this from the parent scope of the directive, so this attribute will never have the {{}}. So, if you have <my-directive foo="bar" /> it will bind whatever is in $scope.bar into your directive in the foo property of your directive's scope. Any change's you make to foo within your scope will be refelected in bar in the parent scope, and vice versa.
I haven't used the '&' notation nearly as much as the other too, so I don't know it as well as those two. From what I understand, it allows you to evaluate expressions from the context of the parent scope. So if you have something like <my-directive foo="doStuff()" />, whenever you call scope.foo() within your directive, it will call the doStuff function in the directive's parent scope. I'm sure there's a lot more you can do with this, but I'm not as familiar with it all. Maybe someone else can explain this one in more detail.
If just the symbol is set in the scope, it will use the same name as the attribute to bind to the directives scope. For example:
scope: {
foo1: '@',
foo2: '=',
foo3: '&'
}When including the directive, there would need to be the attributes foo1, foo2, and foo3. If you want a property in your scope different than the attribute name, you can specify that after the symbol. So, the example above would be
scope: {
foo1: '@bar1',
foo2: '=bar2',
foo3: '&bar3'
}When including the directive, there would need to be the attributes bar1, bar2, and bar3, and these would get bound in the scope under properties foo1, foo2, and foo3 respectively.
I hope this helps. Feel free to ask questions with which I can clarify my answer.
