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

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

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

link: function(scope, element, attrs) {
    var foo1 = attrs.attr1;
    var foo2 = attrs.attr2;
    var foo3 = attrs.attr3;
}

您还可以使用指令上的范围属性将属性自动绑定到范围。请参阅他们的指令文档。所以，类似的东西：

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

如果您想将对象绑定到范围中，则可以使用'='而不是'@'。另一个选择是"＆amp;'评估父范围中的功能。这一切都在上面链接的指令文档中进行了解释。