Javascript 指令未在$watch上执行

我有点绞尽脑汁想弄清楚

.directive

，我试图做的是强制/或一种方式，以便在值发生变化时调用该指令。现在，该值仅在刷新浏览器时更改。但是，如果该值被其他服务更改，我希望它能够动态地被替换

这是控制器

$scope.status = 'warning';

这是html

<tr>
   <th>status</th>
   <td><icon-selector filterby="status"></icon-selector></td>
</tr>

地位

这是指令

angular.module('myApp')
.directive('iconSelector', function ($compile, $timeout) {

    var linkingFunction = function (scope, element, attrs) {
        scope.$watch('filterby', function () {
            if (scope.filterby === 'OK') {
                element.replaceWith('<p>Running OK</p>');
            } else {
                element.replaceWith('<p>Not running</p>');
            }
        });
    };

    return {
        restrict: 'E',
        scope: {
            filterby: '=filterby'
        },
        link: linkingFunction
    };
});

angular.module（'myApp'）
.directive（'iconSelector'，函数（$compile，$timeout）{
var linkingFunction=函数（范围、元素、属性）{
范围.$watch（'filterby'，函数（）{
如果（scope.filterby===“确定”）{
元素。替换为（“运行正常”
”）；
}否则{
元素。替换为（“未运行”）；
}
});
};
返回{
限制：'E'，
范围：{
过滤比：'=过滤比'
},
link:linkingFunction
};
});

现在如果我设置

$scope.status='danger'

使用

$watch

时，我希望`指令中的函数会再次执行，但不会执行，它只在页面重新加载时执行

---

有人能告诉我我做错了什么吗

您的手表触发器正在替换指令元素

所以基本上，在第一次触发之后，你要求替换的元素仍然是指令元素，但是它不再在文档中了，因为你已经在第一次替换了它。很有趣，不是吗

为什么不只是替换指令中的文本（或者您真正需要的内部html），而不是替换整个元素（指令元素永远不应该被动态替换，只有角度内部编译有权这样做）

编辑：示例：

angular.module('myApp')
    .directive('iconSelector', function () {
        return {
            restrict: 'E',
            replace : true,
            template : '<span>{{message}}</span>',
            scope: {
                filterby: '='
            },
            link: function ($scope, $element, $attrs) {
                $scope.$watch('filterby', function (filterby) {
                    if (filterby === 'OK') {
                        $scope.message = 'Running OK';
                    } else {
                        $scope.message = 'Not running';
                    }
                });
            }
        };
    });

angular.module（'myApp'）
.指令（'iconSelector'，函数（）{
返回{
限制：'E'，
替换：正确，
模板：“{message}}”，
范围：{
筛选项：'='
},
链接：函数（$scope、$element、$attrs）{
$scope.$watch（'filterby'，函数（filterby）{
如果（filterby==='OK'）{
$scope.message='运行正常'；
}否则{
$scope.message='未运行'；
}
});
}
};
});

Hmm..奇怪，那是怎么做到的，你能在这里给我举个例子吗？给你（注意“替换”：true和模板属性）那么我的html是否与问题块中显示的相同发生了更改？我能做到这一点吗

$scope.message=''？我不想返回文本，而是想像图标一样返回，这可能吗？不可能，但您可以这样做：在js中使用模板：“”和$scope.iconPath=“sample.png”；