javascript - Angular + ngClass 未应用于 ngView 之外

Question

我有一个带有 2 个 Controller 的应用。

http://jsfiddle.net/waxolunist/UDf2m/4/

您会看到我将 bool 值应用于范围。根据该变量，我想应用一个带有 ng-class 的类。但这在 ngview 之外不起作用。

这不起作用:

<div ng-class="{'red': isRed}" >
  <div ng-view></div>
</div>

这有效:

<div>
  <div ng-class="{'red': isRed}" ng-view></div>
</div>

当我将变量应用于 rootScope 时，它​​会起作用。当我将 isRed 设为函数时，我也可以让它工作，但是，每次点击都会多次调用该函数，我怀疑这会在更大的应用程序中导致性能问题。

如何在 ngview 之外正确评估 ngclass？

更新:

我在这里收集可能的解决方案:

根范围

正如之前和 Franci 所提到的将状态应用于根范围有效:http://jsfiddle.net/waxolunist/UDf2m/9/

缺点:污染 rootScope

函数

将其设为函数调用。 http://jsfiddle.net/waxolunist/UDf2m/12/

缺点:该函数被非常非常频繁地调用(在这个小示例中调用了 4 次)。

Answer 1

您的 Controller 范围仅在 ui-view 元素内可用。在 ui-view 之外，只有 $rootScope 可用。如果您的应用程序确实需要这种结构，您可以做的是注入(inject) $rootScope 并向其添加 isRed 属性。您已经在代码中注释掉了 $rootScope，这应该可以使其工作。

myApp.controller('MyCtrl', function($scope, $routeParams, $rootScope) {
    console.log('MyCtrl');

    /*
    $rootScope.isRed = function() {
        console.log('isRed');
        return angular.isDefined($routeParams.resource);
    };
    */

    $rootScope.isRed = angular.isDefined($routeParams.resource);
    //$rootScope.isRed = true;
    $scope.resource = $routeParams.resource;
});