0
내 전체 테스트 코드에 의해 NG-transclude에서 사용 토글 더 많은 요소를 가지고 :NG-반복 겨-경우 여기
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>
<script>
angular.module('app', []).controller('MainController',['$scope', function($scope){
$scope.model = {
showList: false,
list:[1,2,3,4]
}
}]).directive('withTransclude', function(){
return {
restrict: 'E',
replace: true,
transclude: true,
template:'<div><span>transclude container</span><ng-transclude></ng-transclude></div>',
link:function($scope, $element, attr, ctrl, transclude){
// i dont want the ng-transclude tag so i replaced it
// if comment this expression problem disappear but the ng-transclude tag remains
$element.find('ng-transclude').replaceWith(transclude());
}
}
})
</script>
</head>
<body ng-app='app' ng-controller="MainController">
<button ng-click='model.showList = !model.showList'>toggle show</button>
<div ng-if="model.showList">
<span>shown</span>
<with-transclude>
<div>hello</div>
<ul>
<li ng-repeat="number in model.list">{{number}}</li>
</ul>
</with-transclude>
</div>
</body>
</html>
문제 : NG-transclude를 사용하는 경우 , 내가하지 ng-transclude 태그가 내 페이지에 남아 있기를 바란다. 그래서 그것을 transcluded 콘텐츠로 바꿨다.하지만 버튼을 클릭하여 ng-when을 토글 할 때, ng-repeat 엘리먼트가 렌더링되고, 대체하지 않으면 괜찮다.
질문 : 이 문제가 발생한 이유는 무엇입니까? 이 문제를 일으키지 않는 ng-transclude 태그를 제거하는 다른 방법이 있습니다.
및 코드 plunker : https://plnkr.co/edit/mNw2GcSfnFFMxi6wCfQB?p=preview – fenyiwudian
1,2,3,4가 바로 클릭하면 반복되는 말씀 ?? –