[英]Angular avoid code duplication when using `ng-if`
我當前的實現:
<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>
),以在ng-if
評估為false時封裝我的數據。 我想知道是否有更好的方法可以重寫相同的內容。
也許是這樣的嗎?
//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>
在這種情況下,最好創建一個可以有條件包裝內容的自定義指令。 您可以執行以下操作:
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.