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 error-section errors="errorList"></div>

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

      ______________
     |error1       x|
     |error2       x|
      _______________

任何人都可以帮忙隐藏div吗？

Answer 1

尝试

<div ng-show="errors.length>0 && message !== 0">
    <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-click="message -= 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>

并在您的指令控制器中获取消息的长度并将其提供给$ scope.message。

Answer 2

将您的指令改为使用替换：

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

这样就可以了

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

并且

<div ng-show="errors.length>0" class="error">

这样的div是这样的：

<div error-section errors="errorList error" ng-show="errors.length>0">
    ...
</div>

相反：

<div error-section errors="errorList">
    <div ng-show="errors.length>0" class="error">
        ...
    </div>
</div>

使用自定义指令隐藏div部分

2 个答案: