Angularjs指令：隔离范围和ATTRS [英] Angularjs directive: Isolated scope and attrs

问题描述

请在这里看到的例子

  foodMeApp.directive（'fmRating'，函数（）{
  返回{
    限制：'E'，
    范围： {
      符号：@，
      马克斯：@，
      只读： '@'
    }，
    要求：'ngModel'，
    链接：功能（范围，元素，ATTRS，ngModel）{      attrs.max = scope.max = parseInt函数（scope.max || 5，10）;
...
 

角需求符号，最大，只读来在隔离范围，对象从父范围访问它来定义。

这是用于这里

＆LT; FM评级NG模型=$ parent.restaurant.price符号=$只读=真＆GT;＆LT; / FM评级＆GT;

那么，什么是 ATTRS 的目的是什么？不是一个访问的所有属性可通过 ATTRS 通过。为什么能最大的不是一个访问值 attrs.max 而不是 scope.max

为什么分配回来就好 attrs.max = scope.max ？

由于这个程序是由角作者编写的，我希望有原因的。

感谢。

解决方案

  

是什么ATTRS的目的是什么？

在相同的元素定义为您的指令

属性有几个目的：

1. 他们将信息传递到使用的分离范围指令的唯一途径。由于指令隔离范围不中典型从父范围继承，我们需要一种方法来指定我们想要传递给分离范围。 @，=，和＆放大器;'在对象哈希因此，每个需要一个属性来指定数据/被传递什么样的信息。


2. 它们作为一个跨指令通信机制。 （例如，<一href=\"http://stackoverflow.com/questions/13639399/managing-communication-between-independent-angularjs-directives-independenly/14298481#14298481\">Managing独立AngularJS指令之间的通信independenly ）


3. <他们一href=\"http://stackoverflow.com/questions/14289459/html-element-attribute-names-with-hyphens-are-auto-converted-to-camelcase/14289581#14289581\">normalize属性名称。

  

无法通过ATTRS通过一个接入的所有属性？

是的，你可以，但

1. 您不会有任何数据绑定。
   结果'@'设置单向字符串数据绑定（父范围→分离指令范围内）用@你看到/得到该指令值始终是一个字符串，所以不要使用这个，如果你想一个对象传递给你的指令。
   结果'='设置了双向数据绑定（父范围↔分离指令范围内）。
   结果没有数据绑定，您的指令不能$观看或$自动观测模型/数据的变化。

与
2. 属性值{{}} 旨意造成问题，因为他们不会进行插值。
   结果假设我们有＆LT;我-指令名=我的名字叫{{名}}＆GT; 和家长范围具有 $ scope.name ='马克'。然后，连接功能里面， 的console.log（attrs.name）结果不确定。
   结果如果名称是'@'，那么 ATTRS定义的范围隔离性能。观察$（'名'，函数（VAL）{执行console.log（VAL）}）的结果我的名字叫马克。 （请注意，链接函数内，$观察（）必须被用于获得内插值。）

  

为什么可以最大程度没有一个访问值作为attrs.max代替scope.max

以上

回答

  

为什么分配回来就好attrs.max = scope.max？

我能想到的这样做的唯一原因是在某些情况下，其他指令需要看到这个属性/值（即跨指令通信）。然而，其他指令都需要这个指令后运行这个工作（这可以在一定程度与优先级指令设置控制）。

摘要：在与分离范围的指令，通常你不想使用 ATTRS 。 （我想这可能是初始化数据/值发送到一个指令的方式 - 即，如果你不需要这些值数据绑定和你不需要插值）

Please see the example here

foodMeApp.directive('fmRating', function() {
  return {
    restrict: 'E',
    scope: {
      symbol: '@',
      max: '@',
      readonly: '@'
    },
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {

      attrs.max = scope.max = parseInt(scope.max || 5, 10);
...

Angular needs symbol , max, readonly to be defined in the isolated scope object to access it from parent scope.

it is used here

<fm-rating ng-model="$parent.restaurant.price" symbol="$" readonly="true"></fm-rating>

So, what is the purpose of attrs? Can't one access all the attributes passed through attrs. Why can't one access value of max as attrs.max instead of scope.max

Why assign back like attrs.max = scope.max ?

Since this app is written by Angular authors, I expect a reason.

thanks.

解决方案

what is the purpose of attrs?

Attributes defined on the same element as your directive have a few purposes:

1. They are the only way to pass information into a directive that uses an isolate scope. Since the directive isolate scope doesn't prototypically inherit from the parent scope, we need a way to specify what we want to pass to the isolate scope. '@', '=', and '&' in the "object hash" therefore each require an attribute to specify what data/information is being passed.
2. They serve as an inter-directive communication mechanism. (E.g., Managing communication between independent AngularJS directives independenly)
3. They normalize the attribute names.

Can't one access all the attributes passed through attrs?

Yes you can, but

1. you will not have any data binding.
   '@' sets up one-way "string" databinding (parent scope → directive isolate scope) With @ the value you see/get in the directive is always a string, so don't use this if you're trying to pass an object to your directive.
   '=' sets up two-way databinding (parent scope ↔ directive isolate scope).
   Without databinding, your directive can't $watch or $observe model/data changes automatically.
2. attribute values with {{}}s will cause you problems, since they will not be interpolated.
   Suppose we have <my-directive name="My name is {{name}}"> and the parent scope has $scope.name='Mark'. Then, inside the linking function, console.log(attrs.name) results in undefined.
   If name is an isolate scope property defined with '@', then attrs.$observe('name', function(val) { console.log(val) }) results in My name is Mark. (Note that inside the linking function, $observe() must be used to get the interpolated value.)

Why can't one access value of max as attrs.max instead of scope.max

answered above

Why assign back like attrs.max = scope.max ?

The only reason I can think of for doing this is in case some other directive needs to see this attribute/value (i.e., inter-directive communication). However, the other directive would need to run after this directive for this to work (which can be controlled somewhat with the priority directive setting).

Summary: in a directive with an isolate scope, normally you don't want to use attrs. (I suppose it could be a way to send initialization data/values into a directive -- i.e., if you don't need databinding for these values and you don't need interpolation.)

这篇关于Angularjs指令：隔离范围和ATTRS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！