我不明白如何在链接功能中同时观察多个属性,所以我创建了一个包含所有参数的对象,我会注意它。但是我注意到link函数中的属性是一个字符串而不是一个对象,所以我使用的是angular.fromJson(val)。
All the example I found just use one parameter
您能解释一下如何观看多个属性吗?
由于
修改: 我不能使用attrs参数,因为我需要绑定属性 - 即,它们需要插值。例如
<ul class="thumbnails">
<li class="span3" ng-repeat="image in currentSizeInfo.images" >
<upload-file info = "{{getInfo($index)}}" foo="foo$index" ></upload-file>
</li>
</ul>
我认为我必须使用$ watch
link:function (scope, element, attrs ) {
scope.$watch('info', function (val) {
// if info is and foo is .... do all the stuff
})
}
答案 0 :(得分:11)
我不确定我是否完全理解你的问题,如果我误解,请纠正我。只是想从指令的多个属性中提取值吗?所以说你有这样的HTML:
<my-directive attr1="data1" attr2="data2" attr3="data3" />
您想获得这些不同属性的值吗?在link函数中,您只需使用attrs参数。例如:
link: function(scope, element, attrs) {
var foo1 = attrs.attr1;
var foo2 = attrs.attr2;
var foo3 = attrs.attr3;
}
您还可以使用指令上的scope属性自动将属性绑定到作用域。有关指令,请参阅their documentation。所以,像这样:
scope: {
attr1: '@',
attr2: '@',
attr3: '@'
}
然后这些属性会自动进入您的范围。但是,as I found out,这些值并不总是在您期望的范围内。因此,您可以使用$watch
函数来执行您需要的操作。类似的东西:
link: function(scope, element, attrs) {
scope.$watch("attr1", function () {
if (scope.attr1)
{
//stuff with attr1
}
}
scope.$watch("attr2", function () {
if (scope.attr2)
{
//stuff with attr2
}
}
//....
}
如果你需要同时使用它们,你可以使用一个函数作为$watch
的第一个参数,它返回一个字符串,一旦它们全部存在就会不同,然后放入你的逻辑在作为第二个参数的函数中。所以像这样:
link: function(scope, element, attrs) {
scope.$watch(function () {
if (scope.attr1 && scope.attr2 && scope.attr3)
{
return "allSet";
}
else
{
return "";
}
}, function (newVal) {
if ("allSet" == newVal)
{
//do stuff with all the properties
}
});
}
如果您想将对象绑定到范围中,可以使用'='代替'@'。另一个选择是'&amp;'它评估父作用域中的函数。这些都在上面链接的指令文档中进行了解释。