Angular JS中自定义标签 属性绑定的解释

看到自定义标签的文档时，文档作者解释的能力实在太弱，也可能是本人太笨，一下绕不过来。 看了一个stackoverflow答案，才算明白，在此贴出翻译，以供大家参考。

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

   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:    });

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

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.