Question

我想直接根据<body class="">成员设置$scope.bodyClass属性值，但这不起作用：

的index.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
     <script src="js/angular.min.js"></script>
     <script src="js/application.js"></script>
     <script src="js/controllers.js"></script>
</head>
<body ng-class="{{bodyClass}}">
    <div ng-view></div>
    <p>{{foo}}</p>
</body>
</html>

Controllers.js

var myControllers = angular.module("myControllers", []);
myControllers.controller("HomeController", ["$scope", function ($scope) {

    $scope.foo = "bar";
    $scope.bodyClass = "home";
}]);

的application.js

var applicationModule = angular.module("myApp", ["ngRoute", "LocalStorageModule", "myControllers"]);

applicationModule.config(
    ["$routeProvider", function ($routeProvider) {
        $routeProvider.
            when("/home", {
                templateUrl: "views/home.html",
                controller: "HomeController"
            });
    }]
);

当我运行它时，Chrome浏览器的DOM检查器会报告class=""属性未设置为任何内容。

Answer 1

您在控制器中设置的值仅在其中作用域的DOM中可用。正文标记在该范围之外。您可以将$ rootScope注入控制器并在其上设置bodyClass以使其正常工作。

控制器的范围取决于放置ng视图的位置。

Answer 2

我在不久前发布了SO Question的答案，可能有助于您解决此问题。

基本上，您创建一个提供程序，在应用程序运行时从$ routeProvider获取数据并更改当前路由，您将附加数据附加到when()并在run()上获取并让提供程序更改它根据指定的路线。

此外，您可以通过注入提供程序关联的服务在控制器中使用它。这是实现这一目标的一个小例子。

controller('HomeController', ['$scope', 'RouteData', function($scope, RouteData) {
  RouteData.set('bodyClass', 'Home');
}]);

你的 config（）看起来应该是这样的。

config(function($routeProvider, RouteData) {
 RouteData.applyConfig({
  bodyClass: 'Home'
 });

 RouteData.hookToRootScope(true);

 $routeProvider.when('/home', {
   RouteData: {bodyClass: 'Home'},
   templateUrl: 'home.html',
   controller: 'HomeController'   
 });
});

<强> HTML

<body ng-class="RouteData.get('bodyClass')">

更新：对不起，我提供了错误的SO问题链接.. here it is ..

将body class =“”属性直接设置为$ scope成员值

的index.html

Controllers.js

的application.js

2 个答案: