在angularJS的主页上添加一个类

add class if its home page in angularJS

本文关键字：一个 添加 angularJS 主页      更新时间：2023-09-26

如果是索引，则添加else，删除body tag中的class

app.js 

angular.module('app', [
'ui.router', 
'ngAnimate'
])
.config(
[          '$stateProvider', '$urlRouterProvider',
function ($stateProvider,   $urlRouterProvider) {
    $urlRouterProvider
    .otherwise('/');
    $stateProvider
    .state("app", {
        url: "",
        templateUrl: 'tmpl/app.html'
    })
    .state('app.about', {
        url: '/about',
        templateUrl: 'tmpl/aboutus.html'
    })
    .state('app.result', {
        url: '/result',
        templateUrl: 'tmpl/search_result.html'
    })
}
]
);

index . html 

<body class="home" ng-class="" >

如果它的主页abc.com/添加类，否则删除添加的类，例如:abc.com/#/about

提前感谢Kanagan

有很多选择，可以为主体创建一个控制器来处理这个问题，也可以通过指令或服务来完成。最简单的选择是使用$rootScope。

angular.module('app', [
  'ui.router', 
  'ngAnimate'
])
.run(['$rootScope',function($rootScope){
  $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
      //console.log(toState);
      $rootScope.home = (toState.name == 'app');
  });
}])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider,   $urlRouterProvider) {
    $urlRouterProvider
    .otherwise('/');
    $stateProvider
    .state("app", {
        url: "",
        templateUrl: 'tmpl/app.html'
    })
    .state('app.about', {
        url: '/about',
        templateUrl: 'tmpl/aboutus.html'
    })
    .state('app.result', {
        url: '/result',
        templateUrl: 'tmpl/search_result.html'
    })
}]);

然后在html…

<body class="home" ng-class="{'my-home-class':$root.home}">

我没有测试这个。如果它不起作用，在toState上执行console.log，查看不同页面上的值，并根据需要调整代码。

我创建了一个活塞与一个功能的例子。我不确定什么是在你的app.html，但你有这个设置的方式，我建议添加另一个状态的app.home，我在我的例子中创建的

相关文章：