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

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

angularjs

Angularjs 应用程序启动时，如何设置$scope变量的值？,angularjs,Angularjs,我有以下HTML： <!doctype html> <html lang="en" ng-class="theme"> <head> ... </head> <body> <form> <button class="white-gradient glossy" ng-click="theme = 'darkBlue'">Blue</button> <but

我有以下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>

我试图在启动时将默认主题（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'
}])

原型继承将确保

主题

作为任何子作用域上的属性可用；但是，您无法更改该值，因为在JavaScript中，以这种方式写入属性会覆盖子对象上的属性（例如，在控制器中设置

$scope.theme

，不会将更改传播回

$rootScope

，如您在第二个示例中所看到的）。有关更多信息，请参阅

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


蓝色
黑色
@Scripts.Render（“~/bundles/Angular”）
@Scripts.Render（“~/bundles/AngularApp”）
angular.element（文档）.ready（函数（）{
angular.bootstrap（angular.element（document.find（'html'），['app']）；
});

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

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

工作示例：

重要的是考虑如何在应用程序中的别处访问<代码>主题< /COD>范围属性。这不是问题的一部分。您列出的代码完全有可能正常工作，但是主题变量无法访问，或者由于原型继承的性质而受到影响。目前，除了两个按钮和初始设置之外，主题在其他任何地方都无法访问。谢谢您非常详细的回答。对于这个应用程序，我只需要在一个地方设置主题，这是在主页上，并通过我的两个按钮。如果是这种情况，我还需要使用服务吗？我看到您创建了一个新的.factory，并且正在.run中进行设置。你能告诉我如何把这个问题融入到问题的例子中去吗。例如，我如何适应你的.run（函数（主题）功能{进入问题中我自己的运行？@Marilou服务是在应用程序的不同部分之间共享数据的最干净的方式；您可能会使用

$rootScope

，但您可能会遇到麻烦。至于使用您自己的

运行

功能，只需添加

主题

作为另一个参数，然后添加

主题eme.set

也调用它。

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