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

前端之家收集整理的这篇文章主要介绍了在自定义AngularJS标记中需要一些绑定属性的示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图创建一个类似以下的自定义标签
<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设置。

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

我已经阅读了关于如何使用指令将变量绑定到组件的文档。根据文档,您可以在作用域内进行此类绑定。范围显然可以包含一个“对象散列”(无论是什么!),它创建一个称为“孤立范围”(???)的东西。这样的范围可以以下列方式表示“本地属性”:

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

h?这有什么与正确的语法绑定?

= 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)复制上面的文本,以证明一点:这个doco读取像旧的UNIX文档:对那些已经知道系统的人来说非常有用,但对尝试开发真正专业的初学者没有帮助。所有的教程,显示如何在AngularJS中做简单的任务(伟大的玩具应用程序,但不是那么好的客户端应用程序,我想构建),为什么没有任何更高级的东西?

好吧,让我更富建设性的时间。

有人可以提供一些很好的,简单的例子,如何做各种绑定,这个文档正试图这么难描述?显示这些范围语句和描述(纯英文)的正确语法的示例,它们如何返回添加自定义标记属性

感谢您的耐心和预先感谢您的任何帮助。

你很接近..
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:{‘internalScopeProperty’:’= externalAttributeName’} …其中=表示双向绑定场景。如果你改变了一个@,你会看到它只是允许你传递一个字符串作为一个属性的指令。 &是用于从父作用域的上下文执行函数

我希望有所帮助。

编辑:Here is a working PLNKR

猜你在找的Angularjs相关文章