2016-11-30 5 views
0

Вот мой полный тестовый код:нг-повторить все больше и больше элементов при использовании в нг-transclude и переключается нг-если

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

Проблема: При использовании нг-transclude, я не хотите, чтобы тэг ng-transclude оставался на моей странице, поэтому я заменил его на содержимое с перекрещиванием, но при переключении ng-if, нажав кнопку, все больше и больше элементов ng-repeat получил рендеринг, если я не заменил, все в порядке.

Вопрос: Зачем возникла эта проблема? и есть ли другой способ удалить тег ng-transclude, который не дает этой проблемы.

+1

и код в plunker: https://plnkr.co/edit/mNw2GcSfnFFMxi6wCfQB?p=preview – fenyiwudian

+0

Вашего высказывания, что 1,2,3,4 повторяют при нажатии на Toogle права ?? –

ответ

0

попробовать с нг-шоу вместо нг-если ..... я не видел повторение когда с использованием ng-show

<div ng-show="model.showList"> 

CHECK это