javascript - Angular JS 阻止 Controller 在隐藏元素上运行

Question

我有这个代码

.state('fooState', {
    url: '/foo',
    templateUrl: 'path/to/bar.html',
    controller:'parentController'
})

// THIS IS THE bar.html
<div class="sample">
    <div ng-show="bazinga" ng-controller="child1Controller">
        <!-- cool stuff -->
    </div>
    <div ng-show="!bazinga" ng-controller="child2Controller">
        <!-- cool stuff -->
    </div>
</div>

当显示带有 Controller child1Controller的第一个div时， Controller child2Controller也会运行，这是否正常？如果通过 ng-show="false" 隐藏 Controller ，我该如何防止它运行？我只需要在第一个 div 可见时运行 parentController 和 child1Controller Controller 。与第二个 div 可见时相同，parentController 和 child1Controller Controller 应该只有一个正在运行。

Answer 1

如果我没记错的话，使用 ng-if 而不是 ng-show 应该可以解决您的问题。不同之处在于 ng-if 在计算结果为 false 时不会将元素呈现给 DOM。