指令未在$ watch上执行

Simple-Solution 发表于 Dev

简单解决方案

我有点挣扎，我.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
    };
});

现在，如果我设置$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';
                    }
                });
            }
        };
    });