使用`ng-if`时Angular避免代码重复

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有两次(ng-switch不能使用,因为介于两者之间的新元素)
2. <div ng-if="!isShow" class="inner-class-1">{{item}}</div>重复两次,因为我不希望element(<div class="inner-class"></div>)封装我的数据,当ng-if计算结果为false时.

我想知道是否有更好的方法来重写同样的东西.

Answer 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>