Question

考虑以下代码块。

控制器

function($scope){
   var currentIndex = 1,
   shapes = [{type:'square',/*...*/},{type:'triangle',/*...*/},{type:'triangle',/*...*/},],

   $scope.goToNextShape = function(){
        currentIndex++
        $scope.currentShape = shapes[currentIndex]
   }

}

HTML

<square data="currentShape" ng-if="currentShape.type = 'square'" />
<circle data="currentShape"  ng-if="currentShape.type = 'circle'" />
<triangle data="currentShape" ng-if="currentShape.type = 'triangle'" />
<rectangle data="currentShape"  ng-if="currentShape.type = 'rectangle'" />
<trapezoid data="currentShape" ng-if="currentShape.type = 'trapezoid'" />
<button ng-click="goToNextShape()></button>

我一次显示一个形状，每个形状都通过自己的指令呈现。该指令使用具有动画和其他功能的其他组件。目前，如果我在一个方形对象之后有一个圆，那么一切都很好，因为该指令由于ng-if而被破坏，并且构建了一个圆。但是，如果我背靠背有两个方格，那么该指令不会重建，因为ng-if保持不变。当我goToNextShape()

时，如何进行角度破坏并重建指令

Answer 1

我为优秀的ux体验所做的实际上也是如此。我有一个形状加载屏幕中间的形状。当该屏幕打开时，我通过使用ng-if。

放入父元素来破坏当前形状

HTML

<!-- when shapeIsLoaded = false all directives will be destroyed --->
<!-- just need to make sure a digest cycle is run between shapeIsLoaded switching between true / false --->    
<div ng-if="shapeIsLoaded">
  <square data="currentShape" ng-if="currentShape.type = 'square'" />
  <circle data="currentShape"  ng-if="currentShape.type = 'circle'" />
  <triangle data="currentShape" ng-if="currentShape.type = 'triangle'" />
  <rectangle data="currentShape"  ng-if="currentShape.type = 'rectangle'" />
  <trapezoid data="currentShape" ng-if="currentShape.type = 'trapezoid'" />
  <button ng-click="goToNextShape()></button>
</div>

销毁和重建指令

1 个答案: