So I have a html file called studies.html which displays a list of studies each with an unique nodeRef. Here is a snipped of the code:
<div class="feed-item" ng-repeat="study in studies | orderBy:'title'">
<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>
</div>
</div>
Here is a snippet of code from my app.js:
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/rubyonic/menu.html",
controller: 'AppCtrl',
})
.state('app.studies', {
url: "/studies",
views: {
'menuContent': {
templateUrl: "templates/rubyonic/studies.html",
controller: 'StudyCtrl'
}
}
})
.state('app.study', {
url: "/studies/:studynodeRef",
views: {
'menuContent': {
templateUrl: "templates/rubyonic/overview.html",
controller: 'StudyCtrl'
}
}
})
Here is my StudyCtrl:
.controller('StudyCtrl',['$scope','$stateParams','Studies','$filter','$rootScope',function($scope,$stateParams,Studies,$filter,$rootScope) {
$scope.nodeId = $stateParams.studynodeRef;
$scope.studies = [];
Studies.all().then(function(data) {
$scope.x = angular.fromJson(data.allProjects);
$scope.studies = angular.fromJson($scope.x.list);
// console.log($scope.studies);
});
Studies.fetchCollection($scope.nodeId).then(function(data){
$scope.y = angular.fromJson(data.list);
$scope.collections = angular.fromJson($scope.y[0].collections);
// console.log($scope.collections);
// $scope.$apply();
});
Studies.fetchAlerts().then(function(payload){
$scope.alerts = payload;
$scope.alert = $filter('filter')(payload, function (d) {
$scope.id = "" + $scope.nodeId;
console.log($scope.id);
if (d.nodeRef === $scope.id)
return d;
})[0];
}
);
}
])
Here is my Studies service:
.factory('Studies',function($http,$filter,$q){
return {
all: function(){
var deferred = $q.defer();
$http.get("http://localhost/platform/loginSuccess.json").success(
function(data){
// angular.copy(data, studies);
deferred.resolve(data);
}
);
return deferred.promise;
},
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;
},
fetchAlerts: function() {
var deffered = $q.defer();
$http({
method: 'get',
url: 'alerts.json'
}).success(function(data) {
deffered.resolve(data);
});
return deffered.promise;
}
}})
$scope.nodeId = $stateParams.studynodeRef; obtains the nodeRef from the study url and passes that to the fetchCollection function. Which gets a collection of items that is displayed on the menu.html page (side menu which is present in all templates):
<ion-list ng-controller="StudyCtrl">
<ion-item ng-repeat="collection in collections" 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>
</ion-list>
Now the collections in the side menu don’t automatically update everytime I click on a study in the studies.html page. It updates after I refresh the page. How can I make the collections update automatically everytime I click on a study ?