Ionic - 如何使用 $ionicHistory.goBack() 检测并将值传递回原始视图；答案

【问题标题】：Ionic - How to detect and pass value back to original view with $ionicHistory.goBack();Ionic - 如何使用 $ionicHistory.goBack() 检测并将值传递回原始视图；
【发布时间】：2016-04-09 22:55:25
【问题描述】：

使用离子，我试图有一个用例从列表中选择并返回到具有某些值的原始视图。除了检测到它已返回到原始视图并将值传递回原始视图之外，我已经完成了大部分工作。

到目前为止，我已经完成了以下工作：

进入列表的按钮

    <button class="button button-block button-outline button-positive" ng-click="performselectUnit()"> Select Unit
    </button>

这是使用列表转到新视图的触发器

$scope.performselectUnit = function(){
  console.log('performselectUnit');

  $state.go('app.units');
}

按下时对选定行执行操作时带有列表的视图

  <ion-item collection-repeat="unit in units" class="item item-icon-right item-icon-left" ng-click="selectUnit(unit.id)">

在选择行时，它会使用 $ionicHistory.goBack() 回到原始视图

  $scope.selectUnit = function(unit_id){
  console.log('performselectUnit:' + unit_id);

  $ionicHistory.goBack();
}

从最后一个函数中，如何检测它回到原始视图并传递一些值。

谢谢。

更新：我试过了。

广播结果

  $scope.selectUnit = function(unit_id){
      console.log('performselectUnit:' + unit_id);

      $ionicHistory.goBack();
      $rootScope.$broadcast('selected-unit', { data: unit_id });


    }

在原始视图控制器中，我捕获事件和结果。

$rootScope.$on('selected-unit', function(event, args) {
    console.log("received selected-unit" + args.data);
    $scope.showSelectedUnit = args.data;
});

但它从未在视图中更新

<label class="item item-text-wrap">
    <button class="button button-block button-outline button-positive" ng-click="performselectUnit()"> Select Unit
    </button>
    {{showSelectedUnit}}
</label>

如何让它在视图中更新？或者有没有更好的方法

【问题讨论】：

可以为此创建一个小提琴吗？很容易重现问题。同时尝试在$scope.showSelectedUnit = args.data; 之后调用$scope.apply();，看看是否有效（y）
我让它与 $stateParams 一起工作，这样它就会通过。让我对此进行一些测试。

标签： list cordova ionic-framework parameter-passing back

【解决方案1】：

面对完全相同的问题，我可以通过将调用顺序切换到 goBack 和广播来使其工作：

   $rootScope.$broadcast('selected-unit', { data: unit_id });   
   $ionicHistory.goBack();

【讨论】：

【解决方案2】：

您可以使用 pub-sub 服务在两个 ctrl 之间共享信息

fiddle demo

function MyCtrl($scope, datasharer) {
 $scope.sharedData = datasharer.getSharedData();
 $scope.send = function() {
    datasharer.setSharedData($scope.name);    
 }
}

function My2Ctrl($scope, datasharer) {
  function getSendData(data) {
    console.log(data);
    $scope.sharedData = data;
  }

 datasharer.registerForSharedData(getSendData);
}

【讨论】：

【解决方案3】：

使用$rootScope.$broadcast 和$rootScope.$on 应该确实可以解决您的问题，只需在$rootScope.$on 中使用$scope.$apply：

$rootScope.$on('selected-unit', function(event, args) {
    console.log("received selected-unit" + args.data);
    $scope.$apply(function() {
      $scope.showSelectedUnit = args.data;
    });
});

更重要的是，$rootScope.$broadcast 总是很贵，所以你可以试试$rootScope.$emit。更多关于角事件，请参考https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/.
但是更优雅的解决方案是使用Service在控制器之间共享数据，您可以参考Share data between AngularJS controllers。

【讨论】：