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

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 =“ TestPage”）中确实具有适当的ng-app设置。

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

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

@或@attr-
将本地范围属性绑定到DOM属性。由于DOM属性是字符串，因此结果始终是字符串。如果未指定attr名称，则本地名称和属性名称相同。给定范围的小部件定义：{localName：’@
myAttr’}，则小部件范围属性localName将反映您好{{name}}的插值。随着name属性的更改，小部件作用域上的localName属性也会更改。名称是从父范围（不是组件范围）读取的。

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

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

对不起？这里说的是什么？？？

＆或＆attr-
提供一种在父作用域的上下文中执行表达式的方法。如果未指定attr名称，则本地名称和属性名称相同。给定和小部件的作用域定义：{localFn：’increment（）’}，然后隔离作用域属性localFn将指向递增函数（）的函数包装器。通常希望通过表达式将数据从隔离范围传递到父范围，这可以通过将局部变量名称和值的映射传递到表达式包装器fn中来完成。例如，如果表达式为增量（金额），则可以通过将localFn调用为localFn（{amount：22}）来指定金额值。

现在我完全困惑了！您有widget标签和某种相关功能，我必须编写i才能进行绑定？？？我只想将一个值绑定到标签标签！

我已经从文档（http://docs.angularjs.org/guide/directive）中复制了上面的文本，以说明这一点：该doco读起来就像旧的UNIX文档：对于那些已经了解系统的人确实有用，但是对于尝试发展真正专业知识的初学者而言，没有太大帮助。在所有显示如何在AngularJS中完成简单任务的教程（对于玩具应用程序来说很棒，但对于我想要构建的客户端应用程序来说却不太好），为什么没有更高级的东西呢？

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

有人可以提供一些不错的简单示例来说明如何完成本文档试图描述的各种绑定吗？？？这些示例显示了这些作用域语句的正确语法和说明（以纯英语显示），确切说明了它们如何返回到添加到自定义标记的属性？

感谢您的耐心配合，也感谢您的协助。

Answer 1

你很近..

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' }…其中=表示双向绑定场景。如果将其更改=为a，@您将看到它只允许您将字符串作为属性传递给指令。该&是从父范围的上下文中执行的功能。

希望对您有所帮助。

编辑： 这是一个工作的PLNKR