需要一些自定义 AngularJS 标签中绑定属性的示例 [英] Need some examples of binding attributes in custom AngularJS tags

问题描述

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

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

{{type}}

...(其他组件)...

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

$scope.type = "小";

这样，如果我使用没有属性类型的标签仍然会被设置.

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

angular.module('TestPage',[]).directive('mytag',function() {返回 {限制:'E'，templateUrl: 'component.html',范围: {类型:'='}}});

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

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

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

<块引用>

@ 或 @attr - 将本地范围属性绑定到 DOM 属性.结果总是一个字符串因为 DOM 属性是字符串.如果未指定 attr 名称，则本地名称和属性名称相同.给定范围和小部件定义:{ localName:'@myAttr' }，那么小部件范围属性 localName 将反映 hello {{name}} 的内插值.随着 name 属性的变化，widget 作用域上的 localName 属性也会发生变化.名称是从父作用域(不是组件作用域)读取的.

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

<块引用>

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

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

<块引用>

&或 &attr - 提供一种在父作用域的上下文中执行表达式的方法.如果不指定了attr 名称，则本地名称和属性名称相同.给定的和范围的小部件定义:{ localFn:'increment()' },然后隔离范围属性 localFn 将指向 increment() 表达式的函数包装器.通常希望通过表达式将数据从隔离作用域传递到父作用域，这可以通过将局部变量名称和值的映射传递到表达式包装器 fn 中来完成.例如，如果表达式是 increment(amount)，那么我们可以通过将 localFn 调用为 localFn({amount: 22}) 来指定数量值.

现在我完全糊涂了！您有小部件标签和某种相关功能，我必须编写这些功能才能进行绑定???我想要的只是将一个值绑定到一个标签标签！

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

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

有人可以提供一些很好的、简单的例子来说明如何进行本文档努力描述的各种绑定吗???示例显示了这些范围语句的正确语法和描述(用简单的英语)，它们究竟是如何返回到添加到自定义标记的属性的???

感谢您的耐心等待，并提前感谢您的任何帮助.

解决方案

你很接近..

app.directive('mytag',function() {返回 {限制:'E'，模板:'
'+'<输入 ng-model="控制类型"/>'+'<button ng-click="controlfunc()">父函数</button>'+'<p>{{controlval}}</p>'+'</div>',范围: {/* 使 typeattribute="whatever" 绑定两种方式 (=)$scope.whatever 从父级到 $scope.controltype在该指令的范围内 */控制类型:'=类型属性'，/* 通过父级引用一个函数funcattribute="somefunc()" 并将其粘贴到我们的$scope.controlfunc 中指令的作用域 */controlfunc: '&funcattribute',/* 将字符串值传递给指令 */controlval: '@valattribute'},控制器:功能($范围){}};});<div ng-controller="ParentCtrl"><!-- 你的指令--><mytag typeattribute="parenttype" funcattribute="parentFn()" valattribute="Wee, I'm a value"></mytag><!-- 写出您的范围值-->{{父类型}}
app.controller('ParentCtrl', function($scope){$scope.parenttype = 'FOO';$scope.parentFn = function() {$scope.parenttype += '!!!!';}});

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

希望能帮到你.

<小时>

这是一个有效的 PLNKR

I am attempting to create a custom tag similar to the following:

<mytag type="Big" />

where type is an attribute that gets bound to the component. in such a way that it sets the text in a label, as shown below:

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

... (other components)...

As the documentation says, I have a controller that sets a default type:

$scope.type = "Small";

so that if I use my tag without the attribute type still gets set.

I am attempting to do binding using a directive:

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

Note that I do have the appropriate ng-app settings in my component template (ng-app="TestPage").

My problem is that the binding to type does not appear to be actually binding anything.

I have read the documentation about how to bind a variable to components using directive. According to the documentation, you can do such bindings inside a scope. Scopes apparently can contain an "object-hash" (whatever that is!) which creates something called an "isolate scope" (???). Such scopes can represent "local properties" in the following ways:

@ 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).

Huh??? What has all this to do with the proper syntax for binding?

= 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.

Excuse me? What is being said here???

& 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}).

Now I'm totally confused! You have widget tags and some kind of related function that I have to write iin order to do the bind??? All I want is to bind a value to a label tag!

I have copied the above text from the documentation (http://docs.angularjs.org/guide/directive) to make a point: that this doco reads like the old UNIX documentation: really useful to those who already know the system, but not so helpful to beginners who are trying to develop real expertise. With all the tutorials that show how to do simple tasks in AngularJS (great for toy apps but not so good for the kinds of client- side applications I want to build), why aren't there any for the more advanced stuff???

Okay, time for me to be more constructive.

Can someone please provide some nice, simple examples of how to do the various bindings that this documentation is trying so hard to describe??? Examples that show the proper syntax for these scope statements and descriptions (in plain English) of exactly how they go back to the attribute being added to the custom tag???

Thank you for your patience and thanks in advance for any assistance.

解决方案

Youre pretty close..

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 += '!!!!';
       }
  });

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.

---

EDIT: Here is a working PLNKR

这篇关于需要一些自定义 AngularJS 标签中绑定属性的示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！