如何在指令中同时监视多个插值属性？

8 浏览
0 Comments

如何在指令中同时监视多个插值属性？

我不明白如何在链接函数中同时观察多个属性，所以我创建了一个包含所有参数的对象，并对其进行观察。但我注意到链接函数中的属性是一个字符串，而不是一个对象，所以我使用了angular.fromJson(val)。\n我找到的所有示例都只使用一个参数\n你能解释一下如何观察多个属性吗？\n谢谢\n编辑：\n我不能使用attrs参数，因为我需要绑定属性，即它们需要插值。例如\n

    
    
  • 
       
    
    •

\n我认为我必须使用$watch\n

link:function (scope, element, attrs ) {
    scope.$watch('info', function (val) {
    // 如果info存在且foo存在...做所有的操作
    })
}

0

1 答案

0 Comments

如何在指令中监视多个插值属性？

在这个问题中，用户想要从指令的多个属性中获取值。比如说，用户有如下的HTML代码：

用户想要获取这些不同属性的值。在link函数中，可以使用attrs参数来实现。例如：

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

用户还可以使用指令上的scope属性，将属性自动绑定到scope上。可以参考官方文档中关于指令的部分。例如：

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

这样这些属性就会自动添加到scope中。然而，通过我的一些发现，这些值并不总是在预期的时候出现在scope中。因此，可以使用$watch函数来对它们进行监听。例如：

link: function(scope, element, attrs) {
    scope.$watch("attr1", function () {
         if (scope.attr1)
         {
              //处理attr1
         }
    }
    scope.$watch("attr2", function () {
         if (scope.attr2)
         {
              //处理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)
        {
            //处理所有属性
        }
    });
}

如果希望将对象绑定到scope中，可以使用'='而不是'@'。另一个选项是'&'，它在父作用域中评估一个函数。这些都在上面链接的指令文档中有详细解释。

感谢dnc253的回答，但是我需要绑定这些参数，所以我认为我必须使用scope.$watch，但是我不知道如何监视多个参数。我编辑了问题。

我更新了我的答案。如果我仍然没有理解你的问题，请告诉我。

是的，这就是我想要的，但是我不明白如何同时使用它们的函数。你能写一个例子吗？谢谢

好的，我明白了。你是指这样的吗？[jsfiddle.net/rvd6x/3](http://jsfiddle.net/rvd6x/3)

我在我的答案中添加了另一个例子。在你的示例中，你需要确保prop1在使用之前已经被定义。它可能在定义之前就进入了这个函数。

0