Question

我有以下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'
}]);

Answer 1

在原始示例中，您将$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中，以这种方式写入属性会覆盖子对象上的属性（例如，设置{{ 1}}在控制器中不会将更改传播回$scope.theme，正如您在第二个示例中看到的那样）。有关详细信息，请参阅this wiki article。

您最有可能想要做的是创建一个服务，作为您要访问的所有各个位置之间的共享状态并更改数据。您可以找到有关服务in the Developer Guide和a video tutorial on egghead.io的更多信息，但基本上您可以将它们注入任意数量的控制器，并且控制器共享服务的单个实例。例如，它可能看起来像这样：

$rootScope

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

<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>

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

如何在应用程序启动时设置$ scope变量的值？

1 个答案: