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

我有以下 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，这工作正常。

这是我的应用程序.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 行(设置为"深蓝色"。

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

有人可以告诉我我做错了什么以及为什么它似乎忽略了$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'
}]);

在原始示例中，您将$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，正如您在第二个示例中看到的那样(。有关详细信息，请参阅此维基文章。

您最可能想要做的是创建一个服务，作为您要访问和更改数据的所有不同位置之间的共享状态。您可以在开发人员指南中找到有关服务的更多信息，也可以作为有关 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/

相关内容

最新更新

热门标签：