Корневая область Angularjs не обновляет ngClass при изменении маршрута

На $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';
    });
  }]);

routes angularjs ng-class angularjs-scope rootscope
person Syed    schedule 14.06.2017    source источник
comment
Вы пробовали использовать $rootScope.$apply??   -  person Sangwin Gawande    schedule 14.06.2017
comment
Вы можете использовать $scope, потому что привязки происходят вне области действия ng-veiw.   -  person Vivz    schedule 14.06.2017
comment
Я только что сделал это, как вы упомянули $rootScope.$apply.addClassOnRouteChange = 'of-v', но не повезло :(   -  person Syed    schedule 14.06.2017
comment
@vivz Я получаю сообщение об ошибке при вводе $scope, у меня уже есть билет для этой проблемы stackoverflow.com/q/44542478/1292050   -  person Syed    schedule 14.06.2017
comment
Нет, я имел в виду это, $rootScope.$apply(function(){$rootScope.addClassOnRouteChang‌​e = 'of-h';});   -  person Sangwin Gawande    schedule 14.06.2017
comment
@SangwinGawande Я хотел бы отметить ваше решение как выбранный ответ, потому что оно работает :)   -  person Syed    schedule 14.06.2017
comment
Рад, что смог помочь, отметьте это правильно, я ответил на него ниже. :)   -  person Sangwin Gawande    schedule 14.06.2017

Ответы (2)


arrow_upward
1
arrow_downward

Попробуй это :

$rootScope.$apply(function(){
    $rootScope.addClassOnRouteChang‌​‌​e = 'of-h';
});
person Sangwin Gawande    schedule 14.06.2017

arrow_upward
0
arrow_downward

Попробуй это

$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'}"
person Mr_Perfect    schedule 14.06.2017
comment
Спасибо за помощь. Я попробовал ваше решение, я получаю сообщение об ошибке. Отсюда и решение @Sangwin, упомянутое в комментарии. angular.js:10072 Error: [$parse:syntax] http://errors.angularjs.org/1.2.26/$parse/syntax?p0=%3F&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=25&p3=%7B"<div class="container-slides" ng-class="{ ofHiddenOnRouteChange ? 'of-h':'of-v' }">"fHiddenOnRouteChange%20%3F%20'of-h'%3A'of-v'%20%7D&p4=%3F%20'of-h'%3A'of-v'%20%7D - person Syed; 14.06.2017