Here is my full test code:
<!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>
Problem: When using ng-transclude, I don't want the ng-transclude tag remains in my page, so i replaced it with the transcluded content,but when toggle ng-if by clicking button, more and more ng-repeat element got rendered, if I don't replace,it's ok.
Question: Why this problem occurred? and is there any other way to remove the ng-transclude tag, which doesn't give this problem.
