2

我有一个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 元素。根据ng-if 文档：

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

...

当使用 ngIf 删除一个元素时，它的作用域被破坏并在元素恢复时创建一个新作用域

我添加了loaded将动态选项卡的属性设置为 false 的代码，这应该从 DOM 中删除它的内容。

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

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

4

1 回答 1

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
});
于 2015-02-17T01:04:04.550 回答