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

问题描述

我试图创建一个类似于以下的自定义标签：

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

请注意，我确实有我的组件模板上适当的NG-应用程序设置（NG-应用=TestPage）。

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.

我已阅读有关如何将变量绑定到using指令组件的文档。根据该文件，你可以做一个范围内这样的绑定。显然作用域可以包含一个对象哈希（不管它是什么！）创造一种叫做分离范围（???）。这样的范围可以通过以下方式重新present本地属性：

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:

@或@attr - 绑定本地范围属性的DOM属性。结果总是一个字符串
  因为DOM属性字符串。如果没有指定ATTR名字，那么本地名称和
  属性名相同。给出的范围小部件的定义：{的localName：'@ myAttr'}，那么窗口小部件scope属性的localName将反映打招呼的插值{{名}}。正如其名称属性更改因此将在小部件范围localName属性。这个名字是从父范围（而不是组件范围内）读取。

@ 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?

=或=前pression - 建立一个本地作用域属性和父之间的双向绑定
   scope属性。如果没有指定ATTR名字，那么本地名称和属性名相同。
   给出的范围小部件的定义：{localModel：'= myAttr'}，那么窗口小部件scope属性的localName将反映parentModel的父范围值。到parentModel的任何更改将反映在localModel和localModel的任何改变都会在parentModel反映。

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

＆安培;或放大器; attr指示 - 提供了一种在父范围的上下文中执行一个前pression。如果不
   ATTR名称被指定那么本地名和属性名相同。特定
    和范围小部件的定义：{localFn：'增量（）}，
   然后隔离scope属性localFn将指向函数包装的增量（）前pression。常它是希望通过一个前pression和到母体范围从分离范围传递数据，这可以通过使地图上的局部变量的名称和值到前pression包装FN来完成。例如，如果EX pression是增量（量），那么我们可以通过调用localFn作为localFn（{量：22}）指定的金额值。

& 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为了完成绑定相关的功能？我想要的是一个值绑定到一个标签标记！

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!

我已经复制从文档上面的文字（ http://docs.angularjs.org/guide/directive ）提出一个观点：这DOCO倒像是旧的UNIX文件：真正有用的那些谁已经知道该系统，但不能因此有助于谁试图发展真正的专业知识的初学者。与所有的展示了如何做简单的任务，AngularJS（伟大的玩具的应用程序而不是种客户机端应用程序我想建立好）的教程，为什么没有任何的更先进的东西？

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.

推荐答案

特殊照顾pretty关闭。

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

神奇的是大多是在范围：在你的指令定义声明。有任何范围：从父{} 在那里将孤立的范围，这意味着它获得它自己的范围......不说，它将使用父的范围。神奇的其余部分是在范围内的属性：范围：{'internalScopeProperty'：'= externalAttributeName'} ...其中 = 重新presents一个双向绑定方案。如果改变了 = 到 @ 你会看到它只是允许你传递一个字符串作为一个属性该指令。在＆放大器; 是从父范围的上下文中执行功能。

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.

我希望帮助。

编辑：这是一个工作PLNKR

Here is a working PLNKR

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