Question

我在ng-include内有ng-repeat：

<div ng-repeat="tab in tabs" ng-show="tab.active">
  <div ng-include="tab.url" class="no-padding no-margin"></div>
</div>

如果用户点击标签，我只想将内容加载到DOM中，因此我在ng-if周围使用了ng-include：

<div ng-repeat="tab in tabs" ng-show="tab.active">
    <div ng-if="tab.loaded">
        <div ng-include="tab.url" class="no-padding no-margin"></div>
    </div>
</div>

这部分工作正常。但是，我有一个需要动态内容的选项卡，因此每次用户单击选项卡时，我都需要重新创建该控制器的范围。

根据我的理解，我还可以使用ng-if删除/重新创建DOM元素。根据{{1}} documentation：

ngIf指令删除或重新创建DOM树的一部分基于{expression}

...

当使用ngIf删除元素时，其范围将被销毁并且是新的范围是在元素恢复时创建的

我已经添加了将动态标签的ng-if属性设置为false的代码，该属性应该从DOM中删除它的内容。

然后我将其设置为true，以便重新创建范围，但我无法再次创建范围。

我的方法是否正确，或者除了loaded之外还有什么我可以用于我的目的。

Answer 1

为什么需要“重新创建”范围？如果ngInclude的属性在范围内发生变化，则会包含另一个页面并重新编译所有html。请说明为什么你需要这样做，因为原因可能是错误的。

否则，确实将ngIf计算为false将删除该元素。但是，只有当它没有立即设置为true时，因为angular只有在有机会时才刷新DOM（你的HTML），即在当前的同步代码块之后。

这不会有任何影响：

$scope.theTab.loaded = false;
$scope.theTab.loaded = true;
// Now Angular enter a digest cycle and see that theTab.loaded has not changed.

这将：

$scope.theTab.loaded = false;
// $timeout will wait for a digest cycle before executing the code
// Angular will remove the tab from the DOM
$timeout(function() {
  $scope.theTab.loaded = true;
  // Here a second digest cycle happen, angular will put the tab back into the DOM
});

使用ng-if和ng-include重新创建范围

1 个答案: