Question

我正在编写一个自定义角度指令，以便我可以在网站的许多页面上使用它，以向用户提供类似的错误感觉。为此，我创建了如下所示的指令。

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

USE $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) {

或USE 深度$ 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自定义错误指令未检测到数据更改

1 个答案: