如何在指令中观察多个插值属性？

Question

我不明白如何在链接函数中同时观察多个属性,所以我创建了一个包含所有参数的对象,我会注意它.但是我注意到链接函数中的属性是一个字符串而不是一个对象所以我使用的是angular.fromJson(val).

我发现的所有例子都只使用一个参数

你能解释一下如何看多个属性吗？

谢谢

编辑:我不能使用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
    })
}

Answer 1

我不确定我是否完全理解你的问题,所以如果我误解,请纠正我.只是想从指令的多个属性中提取值吗？所以说你有这样的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属性自动将属性绑定到作用域.请参阅有关指令的文档.所以,像这样:

scope: {
    attr1: '@',
    attr2: '@',
    attr3: '@'
}

然后这些属性会自动进入您的范围.但是,正如我所发现的那样,这些值并不总是在你期望的范围内.因此,您可以使用该$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
        }
    });
}

如果您想将对象绑定到范围中,可以使用"="而不是"@".另一个选项是'&',它评估父作用域中的函数.这些都在上面链接的指令文档中解释.