需要一些自定义AngularJS标记中的绑定属性示例


Need some examples of binding attributes in custom AngularJS tags

我正在尝试创建类似以下内容的自定义标记：

1
<mytag type="Big" />

其中，type是绑定到组件的属性。以这样的方式设置标签中的文本，如下所示：

1
<label>{{type}}</label>

…(其他组件)

如文档所述，我有一个控制器，它设置默认类型：

1
$scope.type ="Small";

因此，如果使用不带属性类型的标记，仍然可以设置类型。

我尝试使用指令进行绑定：

1
2
3
4
5
6
7
8
9
10
angular.module('TestPage',[])
      .directive('mytag',function() {
          return {
              restrict: 'E',
              templateUrl: 'component.html',
              scope: {
                  type: '='
              }
          }
      });

请注意，我的组件模板(ng app="testpage")中确实有适当的ng app设置。

我的问题是，对类型的绑定似乎并没有实际绑定任何内容。

我已经阅读了有关如何使用指令将变量绑定到组件的文档。根据文档，您可以在一个范围内进行这样的绑定。范围显然可以包含"对象哈希"(无论是什么！)它创建了一个叫做"隔离作用域"的东西。？？)。这些范围可以通过以下方式表示"本地属性"：

@ or @attr - bind a local scope property to the DOM attribute. The result is always a string
since DOM attributes are strings. If no attr name is specified then the local name and
attribute name are same. Given and widget definition of scope: { localName:'@myAttr' }, then widget scope property localName will reflect the interpolated value of hello {{name}}. As the name attribute changes so will the localName property on the widget scope. The name is read from the parent scope (not component scope).

嗯？？？？所有这些与绑定的正确语法有什么关系？

= or =expression - set up bi-directional binding between a local scope property and the parent
scope property. If no attr name is specified then the local name and attribute name are same.
Given and widget definition of scope: { localModel:'=myAttr' }, then widget scope property localName will reflect the value of parentModel on the parent scope. Any changes to parentModel will be reflected in localModel and any changes in localModel will reflect in parentModel.

请原谅我？这里说什么？？？？

& or &attr - provides a way to execute an expression in the context of the parent scope. If no
attr name is specified then the local name and attribute name are same. Given
and widget definition of scope: { localFn:'increment()' },
then isolate scope property localFn will point to a function wrapper for the increment() expression. Often it's desirable to pass data from the isolate scope via an expression and to the parent scope, this can be done by passing a map of local variable names and values into the expression wrapper fn. For example, if the expression is increment(amount) then we can specify the amount value by calling the localFn as localFn({amount: 22}).

现在我完全困惑了！你有小部件标签和一些相关的函数，我必须写IIN才能进行绑定？？？？我只想把一个值绑定到一个标签标签上！

我已经从文档(http://docs.angularjs.org/guide/directive)中复制了上述文本来说明一点：这个文档读起来像以前的Unix文档：对那些已经了解系统的人真的很有用，但对那些试图开发真正专业知识的初学者却没有那么大帮助。所有的教程都展示了如何在AngularJS中执行简单的任务(对于玩具应用程序很好，但对于我想要构建的客户端应用程序却不太好)，为什么没有更高级的东西呢？？？？

好吧，是时候让我更有建设性了。

有人能提供一些很好的，简单的例子来说明如何进行本文档如此难以描述的各种绑定吗？？？？示例显示了这些作用域语句和描述(纯英语)的正确语法，以及它们如何返回到要添加到自定义标记的属性？？？？

感谢您的耐心等待，并提前感谢您的帮助。

相关讨论

当我第一次进入角度的时候，我也对这个文档有点纠结，但是我会尝试为您澄清一些事情。首先，当使用这个scope属性时，它会创建一个"隔离作用域"。这意味着它不会从父作用域继承任何属性，因此您不必担心作用域内的任何冲突。

现在，@'表示法意味着属性中的计算值将自动绑定到指令的作用域中。因此，将以拥有一个名为foo的属性的作用域结束，该属性包含字符串"bar"。您也可以做一些类似于的事情，然后{{bar}}的评估值将绑定到范围中。由于属性始终是字符串，因此在使用此表示法时，您将始终以作用域中此属性的字符串结束。

"="表示法基本上提供了一种将对象传递到指令中的机制。它总是从指令的父范围中提取这个值，因此这个属性永远不会有{{}}。因此，如果您有，它将把$scope.bar中的任何内容绑定到您的指令范围内foo属性中的指令中。您在您的范围内对foo所做的任何更改将在父范围内的bar中重新选择，反之亦然。

我使用"&；"符号的次数也没有使用其他符号的次数多，所以我不知道它和这两个符号一样多。根据我的理解，它允许您从父范围的上下文计算表达式。因此，如果您有类似于的东西，每当您在指令内调用scope.foo()，它都会在指令的父范围内调用dostuff函数。我相信你还可以做更多的事情，但我对这一切都不太熟悉。也许其他人可以更详细地解释这一点。

如果只在作用域中设置了符号，它将使用与属性相同的名称来绑定到指令作用域。例如：

1
2
3
4
5
scope: {
   foo1: '@',
   foo2: '=',
   foo3: '&'
}

当包含指令时，需要有属性foo1、foo2和foo3。如果要在作用域中使用与属性名称不同的属性，可以在符号后指定该属性。所以，上面的例子是

1
2
3
4
5
scope: {
   foo1: '@bar1',
   foo2: '=bar2',
   foo3: '&bar3'
}

当包含该指令时，需要有bar1、bar2和bar3属性，这些属性将分别绑定在foo1、foo2和foo3属性下的范围内。

我希望这有帮助。请随意提问，以便我澄清我的答案。

相关讨论

你离得很近……

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
app.directive('mytag',function() {
    return {
        restrict: 'E',
        template: '' +
            '<input ng-model="controltype"/>' +
            '<button ng-click="controlfunc()">Parent Func</button>' +
            '<p>
{{controlval}}
</p>' +
         '',
        scope: {
            /* make typeattribute="whatever" bind two-ways (=)
            $scope.whatever from the parent to $scope.controltype
            on this directive's scope */
            controltype: '=typeattribute',
            /* reference a function from the parent through
               funcattribute="somefunc()" and stick it our
               directive's scope in $scope.controlfunc */
            controlfunc: '&funcattribute',
            /* pass a string value into the directive */
            controlval: '@valattribute'
        },
        controller: function($scope) {                  
        }
    };
});

 
       <!-- your directive -->
       <mytag typeattribute="parenttype" funcattribute="parentFn()" valattribute="Wee, I'm a value"></mytag>
       <!-- write out your scope value -->
       {{parenttype}}
 


  app.controller('ParentCtrl', function($scope){
       $scope.parenttype = 'FOO';
       $scope.parentFn = function() {
           $scope.parenttype += '!!!!';
       }
  });

魔力主要在您的指令定义中的scope:声明中。如果有任何EDOCX1[1]在其中，将"隔离"父级的作用域，这意味着它得到了自己的作用域…如果没有这个，它将使用父级的作用域。魔法的其余部分在作用域的属性中：scope: { 'internalScopeProperty' : '=externalAttributeName' }…其中=表示双向绑定场景。如果您将该=更改为@，您将看到它只允许您将字符串作为属性传递给该指令。&用于从父作用域的上下文执行函数。

希望有帮助。

编辑：这是一个正在工作的PLNKR

相关讨论