【问题标题】:angularjs child state to get data for parent stateangularjs子状态获取父状态的数据
【发布时间】:2015-06-25 07:50:05
【问题描述】:

我想实现一个子状态来获取数据到主状态。当我处于子状态时,我想在父状态的视图上显示 $ionicLoading 内容,并且在加载数据后它应该离开子状态并返回父状态。如何使用 angularjs/ionicframework 实现这一点?

我要拆分的状态的控制器如下所示:

.controller('MainCtrl', function ($scope, $ionicPopover, $state, $ionicLoading, $ionicPlatform, $q, WebService, DBService) {

  //------ THIS PART SHOULD GO INTO THE CHILD STATE -----//
  $ionicLoading.show({
    template: "Daten werden geladen...",
    animation: "fade-in",
    showBackdrop: false,
    maxWidth: 200,
    showDelay: 500
  });


  $ionicPlatform.ready(function() {

    $ionicPopover.fromTemplateUrl('templates/popover.html', {
      scope: $scope
    }).then(function (popover) {
      $scope.popover = popover;
    });

    DBService.dropTables();

    DBService.createAllTables();

    WebService.getAllTables().then(function(res) {

      $ionicLoading.hide();

      $scope.refreshDestinations();
      //DATA is loaded leave the child state

    }, function(err) {

      $ionicLoading.hide();

      //Change the state to login
      $state.go('app.login');

    });
  });
  //----------- UNTIL HERE  -----------//

  ...
});

【问题讨论】:

    标签: angularjs ionic-framework


    【解决方案1】:

    scope是继承的,所以如果要从child调用父scope函数即可。一个例子:使用离子加载,如果它创建了一个孤立的范围(它可能),你可能必须调用 $parent.$ionicLoading.show()。

    <div class="show-scope-demo">
      <div ng-controller="GreetController">
        Hello {{name}}!
      </div>
      <div ng-controller="ListController">
        <ol>
          <li ng-repeat="name in names">{{name}} from {{department}}</li>
        </ol>
      </div>
    </div>
    
    
    
    
    
     angular.module('scopeExample', [])
        .controller('GreetController', ['$scope', '$rootScope', function($scope, $rootScope) {
          $scope.name = 'World';
          $rootScope.department = 'Angular';
        }])
        .controller('ListController', ['$scope', function($scope) {
          $scope.names = ['Igor', 'Misko', 'Vojta'];
        }]);
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-10-20
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多