Javascript AngularJS动态设置类打开<；html>；基于路由的标签_Javascript_Angularjs

Javascript AngularJS动态设置类打开<；html>；基于路由的标签

javascript angularjs

Javascript AngularJS动态设置类打开<；html>；基于路由的标签,javascript,angularjs,Javascript,Angularjs,我不确定最好的方法我想在我的/login路径上动态设置一个类，这样我的登录页面就可以有一个大的背景图像最好的方法是什么以下是我当前的代码： <!DOCTYPE html> <html class="SOME_DYNAMIC_CLASS_HERE_BASED_ON_ROUTE"> ... </html> <body ng-app="myApp"> <div ng-view=""></div> </body>

我不确定最好的方法

我想在我的

/login

路径上动态设置一个类，这样我的登录页面就可以有一个大的背景图像

最好的方法是什么

以下是我当前的代码：

<!DOCTYPE html>
<html class="SOME_DYNAMIC_CLASS_HERE_BASED_ON_ROUTE">
...
</html>
<body ng-app="myApp">
  <div ng-view=""></div>
</body>

angular.module('myApp', ['ngRoute']).config(function ($routeProvider) {
    $routeProvider
      .when('/login', {
        templateUrl: 'login.html',
        controller: 'LoginCtrl'
        })
      .when('/', {
        templateUrl: 'dashboard.html',
        controller: 'DashboardCtrl'
      })


...
angular.module（'myApp'，['ngRoute']）.config（函数（$routeProvider）{
$routeProvider
.when（“/login”{
templateUrl:'login.html'，
控制器：“LoginCtrl”
})
。当（“/”{
templateUrl:'dashboard.html'，
控制器：“DashboardCtrl”
})

使用指令是一种方法

.directive("routeClass", function($location, $parse) {
    var mapping = {};
    return {
      restrict: "A",
      scope: {},
      link: function(scope, element, attrs) {
        mapping = $parse(attrs["routeClass"])(scope);
        // do something with mapping and $location or $routeParams
      }
    }
  });

<any route-class="{'/': 'default', '/Book': 'book'}" />

.directive（“routeClass”，函数（$location，$parse）{
var映射={}；
返回{
限制：“A”，
作用域：{}，
链接：函数（范围、元素、属性）{
映射=$parse（attrs[“routeClass”]）（作用域）；
//使用mapping和$location或$routeParams执行一些操作
}
}
});

另一种方法是通过

$rootScope

进行设置，您必须在

元素中附加

ng应用程序

，以便在angular和视图之间建立任何类型的连接。既然您希望根据应用程序的当前路由进行更改，那么为什么不将这些路由用作配置的参考呢，例如，

$routeProvider

配置。附加所有配置，包括从类到样式的配置或route对象内的任何其他配置。然后，您可以创建一个指令，通过侦听路由更改，然后使用获取当前路由和其他属性对象定义为

$routeChangeSuccess

侦听器的第二个参数，一旦拥有了这些属性，就可以对其执行任何操作

，例如

将类附加到该指令元素

Javascript

配置

指示

HTML

<html ng-app="myApp" class-route>...</html>

。。。

我知道这是一个旧线程，但我在寻找一些指针时遇到了它。我选择了以下感觉更“有角度”的方法。注意，它使用的是基于

controllerAs

的指令：

ngModule.directive('routeClass', routeClass);

function routeClass($state, $log) {

    function controllerFn($scope) {

        var routeClass = this;

        $scope.$on('$stateChangeSuccess', function(){
            // I have a different class name assignment as the 
            // setup of my states is relatively complex, 
            // but this should demonstrate the idea
            routeClass.current = 'page-' + $state.current.name;
        });
    }

    return {
        controller: controllerFn,
        controllerAs: 'routeClass',
        restrict: 'A'
    };
}

它在index.html中的用法如下：

<body ng-app="app" route-class ng-class="{{routeClass.current}}">

@wbeange这里的问题是作用域-你能给OP一个关于如何在html元素上使用指令的更清晰的答案吗？我想如果ng app在html元素上，一个指令可以在那里工作，但我从未尝试在控制器作用域之外使用它。但是我能在我的ng app和ng controller之外使用它吗？我不这样认为，所以那么我会创建一个父控制器吗？或者最好的处理方法是什么？您必须在

ng应用程序中使用它，但不一定在任何ng控制器中使用它，这是设置类的更好方法
ngModule.directive('routeClass', routeClass);

function routeClass($state, $log) {

    function controllerFn($scope) {

        var routeClass = this;

        $scope.$on('$stateChangeSuccess', function(){
            // I have a different class name assignment as the 
            // setup of my states is relatively complex, 
            // but this should demonstrate the idea
            routeClass.current = 'page-' + $state.current.name;
        });
    }

    return {
        controller: controllerFn,
        controllerAs: 'routeClass',
        restrict: 'A'
    };
}

<body ng-app="app" route-class ng-class="{{routeClass.current}}">