Automatic update of menu list items


#1

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 ?


#2

Search the forum for ionic view caching


#3

I am wondering if I need to use rootScope.broadcast or something to broadcast the changes. Not sure how the caching works


#4

In your controller, try something like this:

$scope.$on('$ionicView.beforeEnter', function(){
  Studies.all()......
});

#5

I am a little confused why will the $scope.$on be on the Studies.all() call? What I want is for Studies.fetchCollection to get the updated nodeRef and update the collection list accordingly


#6

Call what you want, it was just an example to put you on track, then you have some work to do.


#7

So I tried this:

$scope.$on('$ionicView.enter', function() {
$scope.nodeId = $stateParams.studynodeRef;
  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);
})
});

And now the $scope.collections actually updates and I can see it on the console however, when I try to print {{collections}} in my template it is blank. I think for some reason the scope isn’t being applied or something. How do I fix this?


#8

ng-repeat directive creates a scope per item.

In order to access scope defined in your controller you must use $parent.

If you search on google you will find plenty of articles in the subject.


#9

Well even when I am not iterating through collections and doing a ng-repeat. When I just try to print the collections object in the template like {{collections}} it is blank


#10

Well post a codepen.

Also, not related with your issue but there is no point in using $scope for storing local variables x and y.

 $scope.y = angular.fromJson(data.list);

better do:

 var y = angular.fromJson(data.list);