Question

我创建了一个自定义指令来显示页面中的错误消息。我的指示是

app.directive('errorsection', function () {
    return {
        restrict: 'EA',
        scope: {
            errors: '=errors'
        },
        templateUrl: '..../shared/error-section.html'
    };
});

错误-section.html

<div ng-show="errors.length>0" class="error">
    <div id="{{error.Id}}" ng-class="{'error':error.Type=='Error','alert-info alert-dismissible cssDataTargetDismiss-{{error.Id}} fade in':error.Type=='Info'}" ng-repeat="error in errors track by $index">
        <button ng-if="error.Type=='Info'" type="button" class="close" data-toggle="collapse" data-target=".cssDataTargetDismiss-{{alert.Id}}">×</button>
        <p><strong ng-bind-html="error.TypeDescription"></strong><span ng-bind-html="error.Message"></span></p>
    </div>
</div>

我在我的部分页面中使用了该指令来显示错误消息

<div error-section errors="errorList"></div>

此errorList包含2条消息。如果单击该按钮，则消息将折叠。如果所有错误消息都已折叠，我想隐藏div。错误消息在视图中显示如下格式

     ______________
 |error1       x|
 |error2       x|
  _______________

如果所有邮件都已折叠，如何隐藏div？

Answer 1

你可以检查一个柜台来完成你的工作 -

<div ng-show="errors.length>0 && clickCount !== errors.length" class="error">
    <div id="{{error.Id}}" ng-class="{'error':error.Type=='Error','alert-info alert-dismissible cssDataTargetDismiss-{{error.Id}} fade in':error.Type=='Info'}"
     ng-repeat="error in errors track by $index">
    <button data-ng-click="clickCount = clickCount + 1" ng-if="error.Type=='Info'" type="button" class="close" data-toggle="collapse" data-target=".cssDataTargetDismiss-{{alert.Id}}">×</button>
    <p><strong ng-bind-html="error.TypeDescription"></strong><span ng-bind-html="error.Message"></span></p> </div>

注意 - 使用链接功能，将 clickCount 初始化为

scope.clickCount = 0;

指令

app.directive('errorsection', function () {
    return {
        restrict: 'EA',
        scope: {
            errors: '=errors'
        },
        templateUrl: '..../shared/error-section.html',
        link : function(scope, elem, attr) {
            scope.clickCount  = 0;
        }
    };
});

总结一下 -

第1步 - 在链接功能中将clickCount初始化为0

第2步 - 更改ng-if条件以使用点击次数

步骤3 - 更改ng-click以增加clickCount

希望这会有所帮助。

Answer 2

是的，你可以做到这一点：

首先将您的指令修改为：

app.directive('errorSection', function () {
    return {
        restrict: 'EA',
        scope: {
            errors: '=errors'
        },
        templateUrl: '..../shared/error-section.html',
        link: function ($scope) {
            $scope.$watch('errors', function (value) {
                if (value) {
                    var count = 0;
                    angular.forEach(value, function(error) {
                        if (error.collapsed) {
                            count ++;
                        }
                    });

                    $scope.errorsCount = value.length;
                    $scope.collapsedErrorsCount = count;
                } else {
                    $scope.errorsCount = 0;
                    $scope.collapsedErrorsCount = 0;
                }
            });
        }
    };
});

现在将您的HTML修改为：

<div ng-show="errorsCount > 0 && errorsCount != collapsedErrorsCount" class="error">
    <div id="{{error.Id}}" ng-show="!error.collapsed"
         ng-class="{'error':error.Type=='Error','alert-info alert-dismissible cssDataTargetDismiss-{{error.Id}} fade in':error.Type=='Info'}"
         ng-repeat="error in errors track by $index">

        <button ng-if="error.Type=='Info'" type="button" class="close" ng-click="error.collapsed = true">×
        </button>

        <p><strong ng-bind-html="error.TypeDescription"></strong><span ng-bind-html="error.Message"></span></p>
    </div>
</div>

以下是发生的事情：

由于您的errors是一个对象列表，因此我们使用另一个键collapsed代替手动折叠值，以便使用{隐藏每个特定div ng-show="!error.collapsed" {1}}
然后我们在您的$watch对象列表中添加了errors，只要您在errors对象中更改了值，就会调用该列表。这将保留两个计数，即总错误数和崩溃的总错误数。
现在，无论何时折叠错误div，都会调用监视表达式并更新两个计数。现在基于这两个计数，您的父级div将从表达式中隐藏：ng-show="errorsCount > 0 && errorsCount != collapsedErrorsCount" class="error"

单击按钮隐藏div

2 个答案: