在离子页面之间共享数据

Question

我正在研究离子项目。我想在页面之间共享数据。以下是我所做的。但它不起作用。可以告诉我我做错了什么。我让用户将数据添加到我的reminder.html页面，并且想要显示在我的meds.html中添加的数据。

This is my services.js 
 

 

 
.factory('Authorization', [function() { 
 
    
 
    authorization = {}; 
 
    authorization.drug = ""; 
 
    
 
    return authorization; 
 
}]); 
 

 

 

 

 

 
This is my controller.js 
 

 

 
.controller('reminderCtrl', ['$scope', '$stateParams','Authorization' 
 
function ($scope, $stateParams,Authorization) { 
 
//$scope.user = Authorization; 
 

 
}]) 
 

 

 
.controller('medsCtrl', ['$scope', '$stateParams','Authorization', 
 
function ($scope, $stateParams,Authorization) { 
 
//$scope.user = Authorization; 
 

 
}]) 
 

 

 

 

 
This is my app.js 
 

 
controller('medsCtrl', function($scope, Authorization) { 
 
    $scope.user = Authorization; 
 
}) 
 

 
.controller('reminderCtrl', function($scope, Authorization) { 
 
    $scope.user = Authorization; 
 
})

This is my reminder.html. The page that I used to add data. 
 
<button class="button button-royal icon ion-android-done" ng-click = "add(user)" ></button> 
 
    </ion-nav-buttons> 
 
    <ion-content padding="true" class="has-header"> 
 
    
 
    <form id="reminder2-form7" class="list"> 
 
     <label class="item item-input" id="reminder2-input9" > 
 
     <input type="text" placeholder="Drug" ng-model = "user.drug" > 
 
     </label> 
 
    
 

 

 

 
This is my meds.html page .This is the page that I want to show the data that I was added to the reminder.html. 
 

 

 
<ion-view title="Meds" id="page14"> 
 
    <ion-nav-buttons side="right" class="has-header"> 
 
    <button class="button button-royal icon ion-android-add-circle"></button> 
 
    </ion-nav-buttons> 
 
    <ion-content padding="true" class="has-header"> 
 
    <ion-list id="meds-list6"> 
 
     <label class="item item-input" id="meds-search3"> 
 
     <i class="icon ion-search placeholder-icon"></i> 
 
     <input type="search" placeholder="med name"> 
 
     </label> 
 
     <ion-item class="item-thumbnail-left dark" id="meds-list-item21"> 
 
     <img src="img/CynoZgjCQlSOdh14y24s_drug-disposal.jpg"> 
 
     <h2dark>Metformin 
 
      <p>for diabetes</p> 
 
     </h2dark> 
 
     </ion-item> 
 
     <ion-item class="item-thumbnail-left" id="meds-list-item22"> 
 
     <img src="img/ZVN6KzlgTP2WdrghQtCH_images.jpg"> 
 
     <h2>Drug:{{user.drug}}</h2> 
 
     
 
     </ion-item> 
 
    </ion-list> 
 
    <a ui-sref="medDiary2" id="meds-button7" class="button button-royal button-clear icon ion-android-add-circle"></a> 
 
    <a ui-sref="searchMeds" id="meds-button10" class="button button-royal button-clear icon ion-android-search"></a> 
 
    <a ui-sref="reminder" id="meds-button25" class="button button-royal button-clear icon ion-android-alarm-clock"></a> 
 
    </ion-content> 
 
</ion-view>

Answer 1

可以在reminderCtrl控制器

$scope.addData = function() { 
    var addObj = {}; 
    // your logic here 
    $rootScope.$broadcast('add-event', { addedObject: addObj }); 
} 

在medsCtrl控制器使用$on

$scope.$on('add-event', function(event, args) { 
    var addedObject = args.addedObject; 
    // Do what you want to do with passed object 
    console.log(addedObject) 
});