在自定义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’} …其中=表示双向绑定场景。如果你改变了一个@，你会看到它只是允许你传递一个字符串作为一个属性的指令。 &是用于从父作用域的上下文执行函数。 我希望有所帮助。 编辑：Here is a working PLNKR （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |