如何 $watch 指令中的多个内插属性? [英] How do I $watch multiple interpolated attributes in a directive?
问题描述
我不明白如何在链接函数中同时观察多个属性,所以我创建了一个包含所有参数的对象并观察它.但我注意到链接函数中的属性是一个字符串而不是一个对象,所以我使用的是 angular.fromJson(val).
I don't understand how to watch multiple attributes at the same time in the link function, so I create an object with all the parameters and I watch for it. But I noticed that the attribute in the link function is a string and not an object so I'm using angular.fromJson(val).
您能解释一下如何查看多个属性吗?
Could you explain how to watch multiple attributes?
谢谢
编辑:我不能使用 attrs 参数,因为我需要绑定属性——即,它们需要插值.例如
EDIT: I cannot use attrs parameter because I need to bind the attributes -- i.e., they require interpolation. For example
<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
I think that I have to use $watch
link:function (scope, element, attrs ) {
scope.$watch('info', function (val) {
// if info is and foo is .... do all the stuff
})
}
推荐答案
我不确定我是否完全理解你的问题,所以如果我误解了请纠正我.只是想从指令的多个属性中提取值吗?假设您有这样的 HTML:
I'm not sure I fully understand your question, so please correct me if I misunderstand. Are just want to pull values from multiple attributes on your directive? So say you have a HTML like this:
<my-directive attr1="data1" attr2="data2" attr3="data3" />
您想获得这些不同属性的值吗?在链接函数中,您只需使用 attrs 参数.例如:
And you want to get the values of those different attributes? In the link function, you just use the attrs parameter. For example:
link: function(scope, element, attrs) {
var foo1 = attrs.attr1;
var foo2 = attrs.attr2;
var foo3 = attrs.attr3;
}
您还可以使用指令上的 scope 属性自动将属性绑定到您的作用域.请参阅关于指令的他们的文档.所以,像这样:
You can also use the scope property on the directive to automatically bind attributes to your scope. See their documentation on directives. So, something like this:
scope: {
attr1: '@',
attr2: '@',
attr3: '@'
}
然后这些属性会自动进入您的范围.但是,我发现,这些值并不总是在您期望的范围内.所以你可以使用 $watch
函数来做你需要的事情.类似的东西:
And then those properties end up in your scope automatically. However, as I found out, those values aren't always in the scope when you'd expect. So you can use the $watch
function to do what you need with them. Something like:
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
的第一个参数使用一个函数,该函数返回一个字符串,一旦它们都存在并且然后将您的逻辑放在作为第二个参数的函数中.所以是这样的:
If you need to use them all together at the same time, you could use a function for the first parameter of the $watch
that returns a string that would be different once they are all there and then put your logic in the function that is the 2nd parameter. So something like this:
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
}
});
}
如果您想将对象绑定到您的作用域中,您可以使用="而不是@".另一个选项是&"它评估父作用域中的函数.这一切都在上面链接的指令文档中进行了解释.
If you're wanting to bind objects into your scope, you can use '=' instead of '@'. Another option is '&' which evaluates a function in the parent scope. This is all explained in the directive documentation linked above.
这篇关于如何 $watch 指令中的多个内插属性?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!