Question

我有点难以理解.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，我希望`指令中的函数能够再次执行，但它不会被执行，它只会在重新加载页面时执行。

有人可以告诉我，我做错了。

Answer 1

你的watch触发器正在替换指令元素。

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

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

编辑：示例：

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';
                    }
                });
            }
        };
    });

指令不会在$ watch上执行

1 个答案: