我正在尝试创建类似于以下内容的自定义标记:
<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设置(ng-app ="TestPage").
我的问题是绑定到类型似乎没有实际绑定任何东西.
我已经阅读了有关如何使用指令将变量绑定到组件的文档.根据文档,您可以在范围内执行此类绑定.范围显然可以包含一个"对象哈希"(无论是什么!),它创建了一个称为"隔离范围"(???)的东西.此类范围可通过以下方式表示"本地属性":
@或@attr - 将本地范围属性绑定到DOM属性.结果总是一个字符串,因为DOM属性是字符串.如果未指定attr名称,则本地名称和属性名称相同.范围的给定和窗口小部件定义:{localName:'@ myAttr'},然后窗口小部件范围属性localName将反映hello {{name}}的内插值.随着name属性的更改,widget命名空间上的localName属性也会更改.从父作用域(而不是组件作用域)读取名称.
咦??? 这与绑定的正确语法有什么关系？
=或= expression - 在本地范围属性和父范围属性之间设置双向绑定.如果未指定attr名称,则本地名称和属性名称相同.范围的给定和窗口小部件定义:{localModel:'= myAttr'},然后窗口小部件范围属性localName将反映父范围上的parentModel的值.对parentModel的任何更改都将反映在localModel中,localModel中的任何更改都将反映在parentModel中.
劳驾？这里有什么说的???
&or&attr - 提供在父作用域的上下文中执行表达式的方法.如果未指定attr名称,则本地名称和属性名称相同.范围的给定和窗口小部件定义:{localFn:'increment()'},然后隔离范围属性localFn将指向increment()表达式的函数包装器.通常需要通过表达式将数据从隔离范围传递到父范围,这可以通过将局部变量名称和值的映射传递到表达式包装器fn来完成.例如,如果表达式是increment(amount),那么我们可以通过将localFn称为localFn({amount:22})来指定金额值.
现在我完全糊涂了!你有小部件标签和某种相关的功能,我必须编写iin命令来做绑定??? 我想要的只是将值绑定到标签标签!
我已经从文档(http://docs.angularjs.org/guide/directive)中复制了上述文本,以表明:这个doco读起来像旧的UNIX文档:对那些已经了解系统的人非常有用,但是对那些试图发展真正专业知识的初学者来说并不那么有用.所有的教程都展示了如何在AngularJS中完成简单的任务(非常适合玩具应用,但对于我想要构建的客户端应用程序的种类不太好),为什么没有更高级的东西？
好的,是时候让我更有建设性了.
有人可以提供一些很好的,简单的例子,说明如何进行本文档试图描述的各种绑定吗？显示这些范围语句和描述(简单英语)的正确语法的示例,它们究竟如何返回到添加到自定义标记的属性？
感谢您的耐心等待,并提前感谢您的帮助.
dnc*_*253 66
当我第一次进入棱角分明时,我对这个文档也有点挣扎,但我会尝试为你澄清一些事情.首先,在使用此scope属性时,它会创建一个"隔离范围".所有这些意味着它不会从父作用域继承任何属性,因此您不必担心作用域内的任何冲突.
现在,'@'表示法意味着属性中的求值将自动绑定到指令的作用域中.因此,<my-directive foo="bar" />最终会得到一个带有名称的属性,该属性foo包含字符串"bar".您也可以执行类似的操作<my-directive foo="{{bar}}"然后将评估的值{{bar}}绑定到范围.由于属性始终是字符串,因此在使用此表示法时,您将始终在范围内使用此属性的字符串.
'='表示法基本上提供了一种将对象传递到指令的机制.它总是从指令的父作用域中提取它,所以这个属性永远不会有{{}}.因此,如果你有<my-directive foo="bar" />它将$scope.bar在foo你的指令范围的属性中将任何内容绑定到你的指令中.您foo在范围内所做的任何更改都将bar在父范围内重新进行,反之亦然.
我没有使用'&'符号几乎和其他符号一样多,所以我不知道它和那两个.根据我的理解,它允许您从父作用域的上下文中计算表达式.因此,如果你有类似的东西<my-directive foo="doStuff()" />,无论何时在你的指令中调用scope.foo(),它都会在指令的父作用域中调用doStuff函数.我相信你可以做更多的事情,但我并不熟悉这一切.也许其他人可以更详细地解释这个.
如果只在范围中设置了符号,它将使用与属性相同的名称绑定到指令范围.例如:
scope: {
foo1: '@',
foo2: '=',
foo3: '&'
}
包含指令时,需要有属性foo1,foo2和foo3.如果希望范围中的属性与属性名称不同,则可以在符号后指定.所以,上面的例子就是
scope: {
foo1: '@bar1',
foo2: '=bar2',
foo3: '&bar3'
}
当包含指令时,需要有属性bar1,bar2和bar3,这些属性将分别绑定在属性foo1,foo2和foo3下的作用域中.
我希望这有帮助.随意提出问题,我可以澄清我的答案.
Ben*_*esh 33
你很亲密..
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:在你的指令定义中的声明中.任何scope: {}在那里将"隔离"范围与父母,意味着它获得它自己的范围......没有它,它将使用父母的范围.其余的魔法在范围的属性中: scope: { 'internalScopeProperty' : '=externalAttributeName' }...其中=代表双向绑定方案.如果将其更改=为a,@您将看到它只允许您将字符串作为属性传递给指令.该&是从父范围的上下文中执行的功能.
我希望有所帮助.
编辑:这是一个工作的PLNKR