FBHY FBHY - 6 months ago 26
AngularJS Question

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

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?

Answer

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();
}