我如何$观看指令多插值属性？ [英] How do I $watch multiple interpolated attributes in a directive?

问题描述

我不明白如何在链接功能，同时观看多个属性，所以我创建了一个对象的所有参数，我看它。但我注意到，在链接功能属性是一个字符串，而不是一个对象，所以我用angular.fromJson（VAL）。

<一个href=\"http://stackoverflow.com/questions/11913841/accessing-attributes-from-an-angularjs-directive\">All这个例子我发现只要用一个参数

您能解释一下如何观看多个属性？

感谢

修改：
即，它们需要插值 - 因为我需要绑定的属性我不能使用的attrs参数。例如：

 ＆LT; UL类=缩略图＆GT;
    ＆LT;李班=span3NG重复=，在currentSizeInfo.images形象＆GT;
       ＆LT;上传文件信息={{的getInfo（$指数）}}富=富$指数＆GT;＆LT; /上载文件＆gt;
    ＆LT; /李＆GT;
＆LT; / UL＆GT;
 

我觉得我必须使用$观看

 链接：功能（范围，元素，ATTRS）{
    范围。手表$（'信息'，函数（VAL）{
    //如果信息是与富是....做所有的东西
    }）
}
 

解决方案

我不知道我完全理解你的问题，所以请纠正我，如果我误解。只是想从你的指令的多个属性值拉？所以说，你有这样的HTML：

 ＆LT;我-指令ATTR1 =数据1attR2位=数据2attr3 =数据3/＆GT;
 

和你想获得这些不同属性的值？在链接功能，你只需要使用的attrs参数。例如：

 链接：功能（范围，元素，ATTRS）{
    VAR foo1 = attrs.attr1;
    VAR foo2的= attrs.attr2;
    VAR foo3 = attrs.attr3;
}
 

您也可以使用该指令范围的属性自动绑定属性的范围。请参见上指示他们的文档。所以，这样的事情：

 范围：{
    ATTR1：'@'，
    attR2位：'@'，
    attr3：'@'
}
 

，然后将这些特性在你的范围会自动结束。然而，<一个href=\"http://stackoverflow.com/questions/12645968/when-do-isolated-scope-properties-actually-get-added-to-the-scope\">as我发现，这些值并不总是在范围内时，你会期望。所以，你可以使用 $观看函数来完成你需要他们什么。是这样的：

 链接：功能（范围，元素，ATTRS）{
    范围。$表（ATTR1​​功能（）{
         如果（scope.attr1）
         {
              //与ATTR1东西
         }
    }
    范围。$表（attR2位功能（）{
         如果（scope.attr2）
         {
              //与attR2位的东西
         }
    }
    // ....
}
 

如果您需要在同一时间同时使用它们，你可以使用函数的第一个参数 $观看返回字符串，这将是不同的一旦他们都在那里，然后把你的逻辑是第二个参数的功能。因此，像这样：

 链接：功能（范围，元素，ATTRS）{
    范围。$表（函数（）{
        如果（scope.attr1＆安培;＆安培; scope.attr2和放大器;＆安培; scope.attr3）
        {
            返回allSet
        }
        其他
        {
            返回;
        }
    }，功能（的newval）{
        如果（allSet==的newval）
        {
            //做的东西与所有属性
        }
    }）;
}
 

如果你想的对象绑定到你的范围，你可以使用'='代替'@'。另一种选择是'和;'它计算在父范围的功能。这是上面链接指令文档中的所有解释。

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).

All the example I found just use one parameter

Could you explain how to watch multiple attributes?

Thanks

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>

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
    })
}

解决方案

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" />

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;
}

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: '@'
}

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
         }
    }
    //....
}

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.

这篇关于我如何$观看指令多插值属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！