Question

我正在努力学习AngularJS，我遇到了一个难以解决问题的问题。

基于此模板，我的应用程序很少。

<!doctype html>
<html lang="en" ng-app="fff">
  <head>
    <meta charset="utf-8" />
  <head>

  <body class="{{bodyClass}}"> 
    <div ng-view></div>
    <script src="/static/js/all.js"></script>
  </body>
</html>

我想更改bodyClass中的ng-view。这种情况的最佳实践解决方案是什么？

Answer 1

您可以通过将控制器置于其中来尝试使用路径

app.run(function($rootScope) {
   $rootScope.$on('$routeChangeSuccess', function(ev,data) {   
     if (data.$route && data.$route.controller)
       $rootScope.controller = data.$route.controller;
   })
});

并将<body class="{{bodyClass}}">更改为<body ng-class="controller">

检查http://plnkr.co/edit/fR6gSqeXbROl410tgzPJ?p=preview

Answer 2

您身体中使用的变量必须来自某个控制器。在ng-view内部，您很可能还有一个带控制器的页面。这个控制器现在是'body'控制器的子代。这意味着您可以从“子”控制器访问父变量。

请阅读：Scopes。这是关于范围的非常非常好的阅读。我甚至认为这是必读的。

Answer 3

最简单的方法是获取对象并在其上定义bodyClass。像

这样的东西

$scope.appStyles={bodyClass:'default'}

此属性应在ng-view html。

的父级上定义的控制器上定义

现在，您将在所有appStyle范围内获得此ng-view对象，因为它们继承了父$ scope。这也意味着您可以在任何地方进行更改，例如

$scope.appStyles.bodyClass='newClass';

更好的方法是将这些设置移动到服务中并进行共享。

从ng-view设置变量

3 个答案: