分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了在自定义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设置。

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

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

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

打扰一下？这里说的是什么？

现在我完全困惑！你有小部件标签和某种相关的功能，我必须写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’} …其中=表示双向绑定场景。如果你改变了一个@，你会看到它只是允许你传递一个字符串作为一个属性的指令。 &是用于从父作用域的上下文执行函数。