1

我有以下 HTML：

<!doctype html>
<html lang="en" ng-class="theme">
<head>
 ...
</head>

<body>
    <form>
       <button class="white-gradient glossy" ng-click="theme = 'darkBlue'">Blue</button>
       <button class="white-gradient glossy" ng-click="theme = 'black'">Black</button>
    </form>
    @Scripts.Render("~/bundles/Angular")
    <script type="text/javascript">
        angular.element(document).ready(function () {
            angular.bootstrap(angular.element(document).find('html'), ['app']);
        });
    </script>
</body>
</html>

这些按钮充当主题切换器来更改我的 CSS，并且效果很好。

这是我的 app.js

var app = angular
    .module('app', ['ui.router', 'admin', 'home', 'questions', 'ngResource', 'LocalStorageModule'])
    .config(['$locationProvider', '$sceProvider', '$stateProvider',
        function ($locationProvider, $sceProvider, $stateProvider) {
            $sceProvider.enabled(false);
            $locationProvider.html5Mode(true);
            var home = {
                name: 'home',
                url: '/home',
                views: {
                    'menu': {
                        templateUrl: '/Content/app/home/partials/menu.html',
                    },
                    'content': {
                        templateUrl: '/Content/app/common/partials/empty.html',
                    }
                }
            }
            $stateProvider
                .state(home));

        }])
    .run(['$rootScope', '$scope', '$state', '$stateParams', function ($rootScope, $scope, $state, $stateParams) {
        $scope.theme = 'darkBlue'
    }])
    .controller('appController', ['$scope', '$resource', '$state', function ($scope, $resource, $state) {
        $scope.state = $state;
    }]);

我试图在启动时将默认主题（HTML 的第 2 行）设置为“darkBlue”。

但是，这似乎不起作用。当我的应用程序启动时，未定义主题。

有人能告诉我我做错了什么以及为什么它似乎忽略了这条线$scope.theme = 'darkBlue'吗？

注意我也尝试了以下，这也没有设置主题：

.run(['$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
    $state.transitionTo('home')

}])
.controller('appController', ['$scope', '$resource', '$state', function ($scope, $resource, $state) {
    $scope.state = $state;
    $scope.theme = 'darkBlue'
}]);
4

1 回答 1

3

在您的原始示例中，您正在$scope注入run函数

.run(['$rootScope', '$scope', '$state', '$stateParams', function ($rootScope, $scope, $state, $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
    $state.transitionTo('home')
    $scope.theme = 'darkBlue'
}])

但run不能注入$scope，因为它不是针对任何特定视图或控制器运行的。但是，您可以注入$rootScope（因为您已经是）并在那里设置数据：

.run(['$rootScope', '$scope', '$state', '$stateParams', function ($rootScope, $scope, $state, $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
    $state.transitionTo('home')
    $rootScope.theme = 'darkBlue'
}])

原型继承将确保它theme可以作为任何子范围的属性使用；但是，您将无法更改该值，因为在 JavaScript 中，以这种方式写入属性会覆盖子对象上的属性（例如，如您所见，$scope.theme在控制器中设置不会将更改传播回$rootScope在你的第二个例子中）。有关更多信息，请参阅此 wiki 文章。

您最可能想要做的是创建一个服务，作为您想要访问和更改数据的所有不同位置之间的共享状态。您可以在开发人员指南和egghead.io 上的视频教程中找到有关服务的更多信息，但基本上您可以将它们注入到任意数量的控制器中，并且这些控制器共享一个服务实例。例如，它可能看起来像这样：

<body>
  <div ng-controller="ThemeController">
    <form>
      <button class="white-gradient glossy"
        ng-click="theme.set('darkBlue')">Blue</button>
      <button class="white-gradient glossy"
        ng-click="theme.set('black')">Black</button>
    </form>
  </div>
  @Scripts.Render("~/bundles/Angular")
  @Scripts.Render("~/bundles/AngularApp")
  <script type="text/javascript">
    angular.element(document).ready(function () {
      angular.bootstrap(angular.element(document).find('html'), ['app']);
    });
  </script>
</body>

然后，您可以设置服务并将其注入控制器：

var app = angular
  .factory('theme', function() {
    var theme = null;

    // every time you inject `theme`, it will inject the same instance
    // of this object, which contains methods for getting and setting
    // the current theme
    return {
      get: function() { return theme; },
      set: function(t) { theme = t; }
    };
  })
  // we can set the default theme in a `run` function
  // by injecting it
  .run(function(theme) {
    theme.set('darkBlue');
  })
  // Here is the new `ThemeController` we created in the template, above
  .controller('ThemeController', function($scope, theme) {
    // bind `theme` to the scope so we can change it
    $scope.theme = theme;
  })
  .config( // rest of app config

工作示例：http: //jsfiddle.net/BinaryMuse/bnAzp/

于 2013-10-05T19:26:28.093 回答