Question

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

<mytag type="Big" />

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

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

......（其他组成部分）......

正如文档所说，我有一个设置默认类型的控制器：

$scope.type = "Small";

这样如果我使用我的标签而没有属性类型仍然设置。

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

angular.module('TestPage',[])
      .directive('mytag',function() {
          return {
              restrict: 'E',
              templateUrl: 'component.html',
              scope: {
                  type: '='
              }
          }
      });

请注意，我的组件模板中有相应的ng-app设置（ng-app =“TestPage”）。

我的问题是绑定到类型似乎并没有实际绑定任何东西。

我已经阅读了有关如何使用指令将变量绑定到组件的文档。根据文档，您可以在范围内执行此类绑定。范围显然可以包含一个“对象哈希”（无论是什么！），它创建一个称为“隔离范围”（???）的东西。这些范围可以通过以下方式表示“本地属性”：

@或@attr - 将本地范围属性绑定到DOM属性。结果总是一个字符串因为DOM属性是字符串。如果没有指定attr名称，那么本地名称和属性名称相同。范围的给定和窗口小部件定义：{localName：'@ myAttr'}，然后窗口小部件范围属性localName将反映hello {{name}}的内插值。随着name属性的更改，widget命名空间上的localName属性也会更改。从父作用域（而不是组件作用域）读取名称。

咦???这与绑定的正确语法有什么关系？

=或= expression - 设置本地范围属性与父级之间的双向绑定范围属性。如果未指定attr名称，则本地名称和属性名称相同。范围的给定和窗口小部件定义：{localModel：'= myAttr'}，然后窗口小部件范围属性localName将反映父范围上的parentModel的值。对parentModel的任何更改都将反映在localModel中，localModel中的任何更改都将反映在parentModel中。

对不起？在这说什么???

＆安培;或＆amp; attr - 提供在父作用域的上下文中执行表达式的方法。如果不指定了attr name，然后本地名称和属性名称相同。特定和widget的范围定义：{localFn：'increment（）'}，然后隔离scope属性localFn将指向increment（）表达式的函数包装器。通常需要通过表达式将数据从隔离范围传递到父范围，这可以通过将局部变量名称和值的映射传递到表达式包装器fn来完成。例如，如果表达式是increment（amount），那么我们可以通过将localFn称为localFn（{amount：22}）来指定金额值。

现在我完全糊涂了！你有小部件标签和某种相关的功能，我必须编写iin命令来做绑定???我想要的只是将值绑定到标签标签！

我已经从文档（http://docs.angularjs.org/guide/directive）中复制了上述文本以表明：这个doco读起来像旧的UNIX文档：对那些已经了解系统但对初学者没那么有用的人真的很有用谁正在努力发展真正的专业知识。所有的教程都展示了如何在AngularJS中完成简单的任务（非常适合玩具应用，但对于我想要构建的客户端应用程序类型不太好），为什么没有更高级的东西？

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

有人可以提供一些很好的，简单的例子，说明如何进行本文档试图描述的各种绑定吗？显示这些范围语句和描述（简单英语）的正确语法的示例，以及它们如何返回到添加到自定义标记的属性???

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

Answer 1

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

现在，'@'表示法意味着属性中的计算值将自动绑定到指令的作用域中。因此，<my-directive foo="bar" />最终将使用名为foo的属性来保留字符串“bar”。您也可以执行类似<my-directive foo="{{bar}}"的操作，然后{{bar}}的评估值将绑定到范围。由于属性始终是字符串，因此在使用此表示法时，您将始终在范围内使用此属性的字符串。

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

我没有使用'＆amp;'符号几乎和其他符号一样多，所以我不知道它和那两个。根据我的理解，它允许您从父作用域的上下文中计算表达式。因此，如果您有类似<my-directive foo="doStuff()" />的内容，则只要在指令中调用scope.foo（），它就会在指令的父作用域中调用doStuff函数。我相信你可以做更多的事情，但我并不熟悉这一切。也许其他人可以更详细地解释这一点。

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

scope: {
   foo1: '@',
   foo2: '=',
   foo3: '&'
}

当包含指令时，需要有属性foo1，foo2和foo3。如果希望范围中的属性与属性名称不同，则可以在符号后指定。所以，上面的例子是

scope: {
   foo1: '@bar1',
   foo2: '=bar2',
   foo3: '&bar3'
}

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

我希望这会有所帮助。随意提出问题，我可以澄清我的答案。

Answer 2

你非常接近..

app.directive('mytag',function() {
    return {
        restrict: 'E',
        template: '<div>' +
            '<input ng-model="controltype"/>' + 
            '<button ng-click="controlfunc()">Parent Func</button>' + 
            '<p>{{controlval}}</p>' + 
         '</div>',
        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) {                  
        }
    };
});

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


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

神奇主要在你的指令定义中的scope:声明中。在那里有任何scope: {}会将范围与父母“隔离”，这意味着它获得了自己的范围......没有它，它将使用父母的范围。魔法的其余部分在范围的属性中：scope: { 'internalScopeProperty' : '=externalAttributeName' } ...其中=表示双向绑定方案。如果将=更改为@，您将看到它只允许您将字符串作为属性传递给指令。 &用于从父作用域的上下文执行函数。

我希望有所帮助。

编辑：Here is a working PLNKR

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

2 个答案: