Angular JS中自定義標籤 屬性綁定的解釋

看到自定義標籤的文檔時，文檔做者解釋的能力實在太弱，也多是本人太笨，一下繞不過來。 看了一個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.