Angularjs rootcope在路由更改时不更新ngClass

时间:2017-06-14 10:12:09

标签: angularjs routes angularjs-scope ng-class rootscope

$routeChangeStart我想申请of-h课程并在$routeChangeSuccess上我要删除of-h课程或将其更改为of-v课程。现在只应用of-h类。

HTML

<div class="container-outer" ng-class="addClassOnRouteChange">
  <div class="container" ng-view autoscroll="true" ng-class="fadeNgView">
    <!-- Views will be rendered here -->
  </div>
</div>

JS

angular.module('starter', ['ngRoute', 'ngAnimate', 'myApp.controllers'])

  .run(['$window', '$location','$rootScope', function ($window, $location, $rootScope) {
    $rootScope.fadeNgView = '';

    $rootScope.$on('$routeChangeStart', function() {
      //event button item list to move forward
      $rootScope.next = function() {
        console.log('start');
        $rootScope.fadeNgView = 'fade-ng-view';
        $rootScope.addClassOnRouteChange = 'of-h';
      }
    });

    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
      $rootScope.addClassOnRouteChange = 'of-v';
    });
  }]);

2 个答案:

答案 0 :(得分:1)

试试这个:

$rootScope.$apply(function(){
    $rootScope.addClassOnRouteChang‌​‌​e = 'of-h';
});

答案 1 :(得分:0)

试试这个

$rootScope.$on('$routeChangeStart', function() {
  //event button item list to move forward
  $rootScope.addClassOnRouteChange = true;
  $rootScope.next = function() {
    console.log('start');
    $rootScope.fadeNgView = 'fade-ng-view';
    $rootScope.addClassOnRouteChange = true;
  }
});

$rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
  $rootScope.addClassOnRouteChange = false;
});

现在将ng-class代码更改为

ng-class="{addClassOnRouteChange?'of-h':'of-v'}"