使用angularjs更改主体背景颜色

方昊英

2023-03-14

问题内容：

我希望能够<body>根据当前路径更改背景色。

我尝试通过每当路径更改时检查$ location.path（）来执行此操作，然后使用ng-style伪指令更改背景色，但这似乎很简单（并且不起作用）。

什么是实现这一目标的更分离的方法？

如果有人想看，这是我写的代码。

app.controller('backgroundCtrl', ['$rootScope', '$scope', '$route', '$location', function($rootScope, $scope, $route, $location){
  $rootScope.$on('$routeChangeStart', function(){

    if ($location.path() == '/'){
      $scope.backgroundStyle = {background: '#ffffff'};
    } else {
      $scope.backgroundStyle = {background: '#000000'};
    }

  });
}]);

问题答案：

为了消除样式，数据，内容等方面的动态变化，通常很实际的做法是创建另一个包含接口（自定义提供程序）的角度模块，该接口可让您在配置级别之前和之后访问这些更改。这是一个小插曲，可以提供我下面将要讨论的内容的观点。

为此，我创建了一个带有providerRouteData 的小模块（route-data.js），该模块公开了两个功能配置：

applyConfig()-分配要在RouteData服务中访问的设置。
hookToRootScope()-将RouteData服务挂接在其中，$rootScope从而使它可用于所有要创建的子作用域和整个应用程序。

RouteData提供程序具有一项RouteData()服务，该服务提供对方法的访问，这些方法用于设置和获取RouteData将在$routeProvider配置中提供的设置。

（如果您不熟悉提供者和服务，请在此处了解更多信息）

（如果您不熟悉config()和run()方法，可以在此处阅读更多内容）

route-data.js

angular.module('RouteData', []).

provider('RouteData', function () {
  var settings = {};
  var hookToRootScope = false;

  this.applyConfig = function(newSettings) {
    settings = newSettings;
  };

  this.hookToRootScope = function(enableRootScopeHook) {
    hookToRootScope = enableRootScopeHook;
  };

  function RouteData() {

    this.set = function(index, value) {
      settings[index] = value;
    };

    this.get = function(index) {
      if(settings.hasOwnProperty(index)) {
        return settings[index];
      } else {
        console.log('RouteData: Attempt to access a propery that has not been set');
      }
    };

    this.isHookedToRootSope = function() {
      return hookToRootScope;
    };
  }

  this.$get = function() {
      return new RouteData();
  };
}).

run(['$location', '$rootScope', 'RouteData', function($location, $rootScope, RouteData) {
  if(RouteData.isHookedToRootSope()) {
    $rootScope.RouteData = RouteData;
  }

  $rootScope.$on('$routeChangeStart', function(event, current, previous) {
    var route = current.$$route;
    if(typeof(route) !== 'undefined' && typeof(route['RouteData']) !== 'undefined') {
      var data = route['RouteData'];
      for(var index in data)
        RouteData.set(index, data[index]);
    } 
  });
}]);

下面展示了如何通过在配置级别注入RouteDataProvider使用的RouteData模块上方，并应用默认配置中，如脚本bodyStyle通过RouteDataProvider.applyConfig()，你还可以添加应用程序完全运行之前更多的设置。通过设置RouteDataProvider.hookToRootScope()为true
将其挂接到$ rootScope中。最后，附加数据，RouteData例如

RouteData: {
      bodyStyle: {
        'background-color': 'green'
      }
    }

由$ routeProvider发送并由run()RouteData模块中定义的方法处理，该方法初始化将在应用程序中访问的RouteData服务的设置。

script.js

angular.module('app', ['ngRoute', 'RouteData']).

config(['$routeProvider', 'RouteDataProvider', function($routeProvider, RouteDataProvider) {
  RouteDataProvider.applyConfig({
    bodyStyle: {
      'background-color': 'white'
    }
  });

  RouteDataProvider.hookToRootScope(true);

  $routeProvider.when('/landing', {
    RouteData: {
      bodyStyle: {
        'background-color': 'green'
      }
    },
    templateUrl: 'landing.html',
    controller: 'LandingController'  
  }).when('/login', {
    RouteData: {
     bodyStyle: {
         'background-color': 'gray',
         padding: '10px',
         border: '5px solid black',
         'border-radius': '1px solid black'
     }
    },
    templateUrl: 'login.html',
    controller: 'LoginController'
  }).otherwise({
    redirectTo: '/landing'
  });

}]).

controller('LoginController', ['$scope', function($scope) {

}]).

controller('LandingController', ['$scope', function($scope) {

}]);

因此，要添加到索引页面或任何其他页面中的最后一段代码将是这样的。

一部分 index.html

<body ng-style="RouteData.get('bodyStyle')"> 
    <a href="#/landing">Landing</a> | 
    <a href="#/login">Login</a>
    <div ng-view></div>
</body>

使用angularjs更改主体背景颜色

相关阅读

相关文章

相关问答

相关工具

相关文档