In my ionic app I have two services Studies and Collections. Studies makes a http call to get a json object which gets a JSON array object which I iterate through and display on the html page. Here is the studies service:
.factory('Studies',function($http,$filter,$q){
var deferred = $q.defer();
$http.get("http://localhost/platform/loginSuccess.json").success(
function(data){
// angular.copy(data, studies);
deferred.resolve(data);
}
);
return {
all: function(){
return deferred.promise;
}
};
})
And here is the controller code:
$scope.studies = [];
Studies.all().then(function(data) {
$scope.x = angular.fromJson(data.allProjects);
$scope.studies = angular.fromJson($scope.x.list);
});
This is how it is displayed in the html:
<div class="feed-item" ng-repeat="study in studies">
<div class="feed-media">
<img src="http://www.speedhunters.com/wp-content/uploads/2013/12/Lamborghini-Hurac%C3%A1n-LP610-4-01_N3-1200x800.jpg" class="feed-image">
<div class="feed-gradient-overlay"></div>
<a href="#/app/studies/{{study.nodeRef}}"><h4 class="feed-title">{{study.title}}</h4></a>z
</div>
</div>
study.nodeRef is then extracted in the same controller and then fetched to another function that calls another service using the nodeRef.
scope.nodeId = $stateParams.studynodeRef;
$scope.collection = [];
Collections.fetchCollection($scope.nodeId).then(function(data){
$scope.y = angular.fromJson(data.list);
$scope.collections = angular.fromJson($scope.y[0].collections);
});
Here is the collections service:
.factory('Collections', ['$q', '$http', function($q, $http) {
return {
fetchCollection: function(collectionId) {
var deffered = $q.defer();
$http({
method: 'post',
url: 'http://localhost/platform/project/fetch.json',
params: {
'nodeRef': collectionId
}
}).success(function(data) {
deffered.resolve(data);
});
return deffered.promise;
}
};
}])
Then I iterate through the collections in my menu.html page which is basically a side menu present in all my templates:
<ion-list ng-controller="NavigationCtrl" ng-repeat="collection in collections">
<ion-item nav-clear menu-close ng-click="go('app.studies')" class="item item-icon-left brand-base-text-color">
<i class="icon ion-ios-paper"></i>
{{collection.name}}
</ion-item>
Now when I click on a study on the studies.html page it redirects to the appropriate #/app/studies/{{study.nodeRef}} however, the side menu doesn't update the collections on the side menu even after I refresh it. Both study and collections service are under the same controller called AppCtrl. How do I get the collections to reload automatically based on appropriate nodeRef of the study?
Edit:
Here is the code I have in my app.js file for studies,study and menu(where the iteration for collections is done). As can be seen they all use the same controller called AppCtrl:
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/rubyonic/menu.html",
controller: 'AppCtrl',
reload: true
})
.state('app.studies', {
url: "/studies",
views: {
'menuContent': {
templateUrl: "templates/rubyonic/studies.html",
controller: 'AppCtrl',
reload: true
}
}
})
.state('app.study', {
url: "/studies/:studynodeRef",
views: {
'menuContent': {
templateUrl: "templates/rubyonic/overview.html",
controller: 'AppCtrl',
reload: true
}
}
})