Question

我有一个带2个控制器的应用程序。

您看到我将一个布尔值应用于范围。根据该变量，我想要应用具有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？

更新

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

Rootscope

正如前面提到的那样，Franci将状态应用于rootcope工作：http://jsfiddle.net/waxolunist/UDf2m/9/

缺点：污染rootScope

功能

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

缺点：非常经常调用该函数（在这个小例子中是4次）。

Answer 1

您需要使用ng-controller作为根级别

<div ng-app="myApp" ng-controller="MyCtrl">    
    <ul>
        <li><a href="#/">Home</a></li>
        <li><a href="#/some">A resource</a></li>
        <li><a href="#/some/arbitrary/url">A deep linked resource</a></li>
    </ul>
    <div ng-class="{'red': isRed}" >
         <div ng-view></div>
    </div>
</div>

请参阅here一切正常

Answer 2

您的控制器范围仅在ui-view元素内可用。在ui-view之外只有$ rootScope可用。如果您的应用程序确实需要这种结构，您可以执行的操作是注入$ 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;
});

Angular + ng Class未在ng视图之外应用

更新

Rootscope

功能

2 个答案: