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>

上面的代码有效，但代码重复很多：

ng-if有两次（ng-switch无法使用，因为介于其间的新元素）
<div ng-if="!isShow" class="inner-class-1">{{item}}</div>重复两次，因为当<div class="inner-class"></div>评估为false时，我不希望元素（ng-if）封装我的数据。

我想知道是否有更好的方法来重写它。

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;
        }
    };
});

要像这样使用：

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

Answer 2

在这种情况下，最好创建一个可以有条件地包装内容的自定义指令。你可以这样做：

＆＃13;

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);
          });
        }
      })
    }
  };
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: