Question

我尝试通过从另一个控制器更改我的变量值来修改我的视图，但它不起作用......

我想在css动画播出后才显示我的内容。这是我的代码：

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

观点：

<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>

有人拄着拐杖帮助我吗？

Answer 1

将CommentsCtrl中的renderContent更改为$ rootScope属性

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

Answer 2

使用$rootScope或service从另一个控制器获得一个控制器的控制器。

如何在另一个Controller中使用$ scope变量修改视图？

2 个答案: