角度回避のコードの重複 `NG-if`を使用した場合

Question

私の現在の実装：

<div class="outer-class" ng-repeat="item in items"> 
    <div class="inner-class" ng-if="isShow"> 
    <div class="inner-class-1">{{item}}</div> 
    </div> 
    <div ng-if="!isShow" class="inner-class-1">{{item}}</div> 
</div> 

上記のコードは動作しますが、コードの繰り返しがたくさんある：

1. ng-ifが（2回ありng-switchは新しい要素が間に導入されているため使用できません）
2. <div ng-if="!isShow" class="inner-class-1">{{item}}</div>が2回繰り返されています。なぜなら、01（）はfalseと評価されます。

私はおそらく同じ方法を書き直すより良い方法があるのだろうかと思っていました。

Answer 1

：このように使用することが

//optional wrapper 
 

 
function resolveTemplate(tElement, tAttrs) { 
 
    if (tAttrs.showWrapper){ 
 
    return "<div ng-class='wrapperClass' ng-transclude></div>" 
 
    } 
 
    else return "<ng-transclude></ng-transclude>"; 
 
} 
 

 
app.directive('optionalWrapper', function() { 
 
    return { 
 
     restrict: 'E', 
 
     transclude: true, 
 
     template: resolveTemplate, 
 
     link: function($scope, el, attrs) { 
 
      $scope.wrapperClass = attrs.wrapperClass; 
 
     } 
 
    }; 
 
});

。あなたは、クラス内部クラスを持つ親を持つことがないインナークラス-1の要素はすべて一緒に、または単に別の要素に包まれたくない

angular.module('demo', []).controller('DemoController', function($scope) { 
 
    $scope.items = [1, 2, 3]; 
 
    $scope.isShow = false; 
 
}) 
 

 
.directive('wrapIf', function() { 
 
    return { 
 
    restrict: 'A', 
 
    transclude: true, 
 
    link: function(scope, element, attrs, controller, transclude) { 
 

 
     var previousContent; 
 

 
     scope.$watch(attrs.wrapIf, function(newVal) { 
 
     if (newVal) { 
 
      previousContent.parent().append(element); 
 
      element.empty().append(previousContent); 
 
     } else { 
 
      transclude(function(clone, scope) { 
 
      previousContent = clone; 
 
      element.replaceWith(clone); 
 
      }); 
 
     } 
 
     }) 
 
    } 
 
    }; 
 
});

.inner-class, .inner-class-1 { 
 
    padding: 6px; 
 
    background: #DDD; 
 
} 
 
.inner-class-1 { 
 
    background: #34dac3; 
 
} 
 
.outer-class { 
 
    margin-bottom: 6px; 
 
}

<script src="https://code.angularjs.org/1.4.8/angular.js"></script> 
 

 
<div ng-app="demo" ng-controller="DemoController"> 
 

 
    <p> 
 
    <button ng-click="isShow = !isShow">Toggle isShow ({{ isShow }})</button> 
 
    </p> 
 

 
    <div class="outer-class" ng-repeat="item in items"> 
 
    <div class="inner-class" wrap-if="isShow"> 
 
     <div class="inner-class-1" ng-click="test(item)">{{item}}</div> 
 
    </div> 
 
    </div> 
 

 
</div>

Answer 2

多分このような何か？あなたは条件付きで中身を包むことができ、カスタムディレクティブを作成したほうが良いでしょう。この場合

<optional-wrapper wrapper-class='inner-class-1' show-wrapper='isShow'></optional-wrapper>