Ionic - How to detect and pass value back to origi

问题:

Using ionic, I am trying to have a use case to select from a list and return back to the original view with some value. I'ved already done most of the part except detecting it has returned to the original view and passing a value back to the original view.

Here's so far what i'ved accomplished:

button that goes to a list

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

this is the trigger to go to the new view with the list

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

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

the view with list when press performs an action on the selected row

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

on selection of the row it goes back to the original view with $ionicHistory.goBack()

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

  $ionicHistory.goBack();
}

From the last function, how do detect its gone back to the original view and pass some value.

Thanks.

UPDATE: I tried this.

Broadcast the result

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

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


    }

in the original view controller i capture the event and result.

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

but it NEVER got updated in the view

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

How can I get it to update in the view ? or is there a better way

回答1:

Faced to the exact same issue, I could make it work by switching the order of calls to goBack and broadcast:

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

回答2:

You can use pub-sub service for sharing info between two 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:

Using $rootScope.$broadcast and $rootScope.$on should resolve your problem indeed, just use $scope.$apply in $rootScope.$on:

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

What's more, the $rootScope.$broadcast is always expensive, so you could try $rootScope.$emit instead. More about angular event, please refer to https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/.
But the more graceful solution is use Service to share data between controllers, you could refer to Share data between AngularJS controllers.