How to modify view with $scope variable in another Controller?

Question

I try to modify my view with change my variable value from another controller, but it's not working ...

I want to display my content only after css animation is endend. here is my code:

.controller('AppCtrl', function($scope, $rootScope, $state, $ionicPopup, AuthService, AUTH_EVENTS) {
  $scope.showLoader = function(){
    var loader = document.getElementById("loader");
    loader.style.zIndex = "9";
    loader.style.opacity = "1";
    var loading = loader.getElementsByClassName("loading")[0];
    loading.className = "loading animated bounceInDown";
  }

  $scope.hideLoader = function(){
    var loader = document.getElementById("loader");
    var loading = loader.getElementsByClassName("loading")[0];
    angular.element(document.querySelector('#loader .loading')).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
      loading.className = "loading animated bounceOutDown";
      angular.element(document.querySelector('#loader .loading')).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
        loader.style.zIndex = "-1";
        loader.style.opacity = "0";
        $rootScope.$apply(function () {
          $rootScope.renderContent = true;
        });
      });
    });
  }
}

.controller('CommentsCtrl', function($scope, $rootScope, $state, $http, $ionicPopup, AuthService, WebServices, $stateParams) {
  $scope.renderContent = false;
  $scope.showLoader();
  $scope.hideLoader();
}

And the view:

<ion-view view-title="Waiting comments"  name="dashboard-view">
  <ion-content has-header="true">
    <div ng-show="renderContent">
      <ion-list>
       Animation finished!
      </ion-list>
    </div>
  </ion-content>
</ion-view>

Someone cane helps me?

Yes, maybe Service is more appropriate for this! thank you :) — FBHY
– FBHY, Commented Jun 10, 2016 at 10:37

aseferov · Accepted Answer · 2016-06-10 10:34:14Z

1

change renderContent in CommentsCtrl to $rootScope property

.controller('CommentsCtrl', function($scope, $rootScope, $state, $http, $ionicPopup, AuthService, WebServices, $stateParams) {
  $rootScope.renderContent = false;
  $scope.showLoader();
  $scope.hideLoader();
}

answered Jun 10, 2016 at 10:34

aseferov

6,4233 gold badges20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Code Guru · Accepted Answer · 2017-07-06 11:23:13Z

0

Either use $rootScope or service to have a controller of one controller from another controller.

edited Jul 6, 2017 at 11:23

Code Guru

15.8k31 gold badges147 silver badges214 bronze badges

answered Jun 13, 2016 at 13:43

Rohit

2211 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to modify view with $scope variable in another Controller?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related