AngularJS 自定义错误指令未检测到数据更改

Question

我正在编写一个自定义 angular 指令，这样我就可以在站点的多个页面上使用它，从而为用户提供类似的错误感觉。为此，我创建了如下所示的指令。

angular.module('ErrorMessages', []);

angular.module('ErrorMessages').directive('errorMessage', function () {
    return {
        templateUrl: '/Scripts/Directives/ErrorDirective/Error.html',
        restrict: 'AE',
        multiElement: true,
        scope: {
            resultData: '@'
        },
        link: function (scope, elem, attrs) {
            alert('result data is: ' + attrs.resultData);
            scope.$watch(attrs.resultData, function (value) {
                alert(value);
                if (value == undefined || value.length == 0) {
                    alert('Dont show error');
                        scope.ShowError = false;
                } else {
                    alert('show error');
                        scope.ShowError = true;
                        scope.Messages = value;
                    }
                });
            }
    }
});

当前模板在这里。

<div style="color: red;" ng-show="ShowError">
    <div class="row">
        <div class="col-md-12">
            <h1>Error</h1>
        </div>
    </div>
    <div class="row ">
        <div class="col-md-12 error">
            <ul>
                <li ng-repeat="message in Messages">{{message}}</li>
            </ul>
        </div>
    </div>
</div>

然后我将其标记在 html 页面上。

<error-Message result-data="Errors"></error-Message>

我想做的是在控制器上设置错误变量并显示或隐藏错误。

$scope.Errors = [];
$scope.Errors.push('error text');

但是当我这样做时，手表似乎没有被触发。感谢您的帮助。

Answer 1

使用$watchCollection:

     ̶s̶c̶o̶p̶e̶.̶$̶w̶a̶t̶c̶h̶(̶a̶t̶t̶r̶s̶.̶r̶e̶s̶u̶l̶t̶D̶a̶t̶a̶,̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶(̶v̶a̶l̶u̶e̶)̶ ̶{̶ 
     scope.$watchCollection(attrs.resultData, function (value) {

或使用deep $watch:

    scope.$watch(attrs.resultData, function (value) {
        alert(value);
        if (value == undefined || value.length == 0) {
            alert('Dont show error');
                scope.ShowError = false;
        } else {
            alert('show error');
                scope.ShowError = true;
                scope.Messages = value;
            }
        ̶}̶)̶;̶
        //USE DEEP WATCH
        }, true);

脏检查可以采用三种策略：按引用、按集合内容、按值。这些策略在检测到的变化类型和性能特征方面有所不同。

有关详细信息，请参阅

AngularJS Developer Guide - Scope $watch Depths- AngularJS Developer Guide - Scope $watch Performance Considerations

AngularJS 自定义错误指令未检测到数据更改

AngularJS custom error directive not detecting data changes

angularjs

angularjs-scope

angularjs-watch