Question

我尝试根据自定义指令的属性值更新元素内容。下面的代码表现良好，但在网站加载时只执行一次。属性值的动态更新不会触发任何事件。我做错了什么？

ng-repeat中的

标记（匹配中匹配）：

<div ng-tipp-result="[[getIconClass(match)]]"></div>

指令：

myApp.directive('ngTippResult', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
            var content = "s";

            scope.$watch(attrs.ngTippResult, function(v){
                switch(v){
                    case 1: content = '<i class="icon-circle"></i>';break;
                    case 2: content = '<i class="icon-X"></i>';break;
                    case 3: content = '<i class="icon-Y"></i>';break;
                    case 4: content = '<i class="icon-Z"></i>';break;
                    case 5: content = '<i class="icon-ok"></i>';break;
                    case 6: content = '<i class="icon-minus"></i>';break;
                }

                elem.html(content);
            });
        }
    };
});

修改

使用属性名称作为字符串解决了问题但导致了另一个问题，我遇到了上面代码的无限摘要循环。

<li ng-repeat="match in matches">
    <i class="pull-right [[getIconClass(match)]]"></i>
</li>

getIconClass是一个控制器方法，它根据匹配返回1到6的值。

Answer 1

$watch的第一个参数应该是您要观看的值的getter函数。尝试

scope.$watch(function(){return attrs.ngTippResult}, function(v){...});

请参阅文档here。

可能发生的是attrs.ngTippResult正在评估String。字符串是一个有效的输入，但我不认为这是你的意图;似乎每次attrs.ngTippResult更改都需要更新。相反，您当前的代码正在使用attrs.ngTippResult的值观察范围上的属性（例如，如果attrs.ngTippResult为"fish"，那么您当前使用当前代码观看的值实际上是{{1这可能不是你想要的。

修改

另外，aaronfrost的回答可能是你想要做的最好的答案。

Answer 2

您可以将属性映射到指令范围：

myApp.directive('ngTippResult', function() { return { scope: { theTippResult:"=ngTippResult", ...}}});

然后你只需要将变量名称放在一个字符串中： scope.$watch('theTippResult', function(v){...});

- 或者 - 使用像Hylianpuffball建议的函数方法，尽管我仍然将它映射到你的模型，就像'自我记录'代码一样。

Answer 3

对于指令中的attrs对象，不应使用scope。$ watch。你应该使用attrs。$观察。它的构建允许您在不做手表的情况下观察属性值。但是，语法几乎相同。

请参阅doc here

Angular $ watch不会在我的指令中触发任何事件

3 个答案: