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

【问题标题】：Angular $watch does not fire any event in my directiveAngular $watch 不会在我的指令中触发任何事件
【发布时间】：2014-01-04 14:22:34
【问题描述】：

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

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 的值。

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

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

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

请参阅文档here。

可能发生的是attrs.ngTippResult 正在评估一个字符串。字符串是一个有效的输入，但我认为这不是你想要的；似乎您每次attrs.ngTippResult 更改时都想要更新。相反，您当前的代码正在使用 attrs.ngTippResult 的值监视范围上的属性（例如，如果 attrs.ngTippResult 是 "fish"，那么您将使用当前代码监视的值实际上是 $scope.fish，即可能不是你想要的。

编辑

此外，aaronfrost 的答案可能是您尝试做的最好的。

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

对于指令中的 attrs 对象，不应使用 scope.$watch。你应该使用 attrs.$observe。它旨在让您无需监视即可查看属性值。但是，语法几乎相同。

见doc here

【讨论】：