I have the following AngularJS application posed of a template (index.html), an app definition (app.js), a controller definition (controllers.js) and a hosting page (host.jsp).

The code is as follows:

search.jsp

<div class="container-fluid" ng-app="facetedSearch">
    <div class="row-fluid" ng-view>
    </div>
</div>
<script src="//ajax.googleapis/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="/resources/js/page/search/app.js"></script>
<script src="/resources/js/page/search/controllers.js"></script>

app.js

angular.module('MyApp', []).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
     when('/', {templateUrl:'/index.html', controller: MyController}).
     otherwise({redirectTo: '/'});
}]);

controller.js

var MyController=['$scope','$http','$location',function ($scope, $http, $location) {
   //do some fancy stuff
   if($scope.myAttribute===undefined){
      $scope.myAttribute=someDataFromHttpRequest;
   }
   $location.search(someParameters);
}];

index.html and host.jsp are not shown for brevity and their irrelevance.

The controller gets some data from Ajax request, stores some of it in the $scope to avoid requesting it again and the shows it to the user and waits for input. When the user selects some data in the view, I update URL query part to reflect selection changes. But I want to avoid subsequent Ajax requests by checking if the data is available in the $scope.

The problem I'm facing is that the $scope.myAttribute is always undefined. It resets on every request. I think I'm misusing AngularJS. Any clue?

I have the following AngularJS application posed of a template (index.html), an app definition (app.js), a controller definition (controllers.js) and a hosting page (host.jsp).

The code is as follows:

search.jsp

<div class="container-fluid" ng-app="facetedSearch">
    <div class="row-fluid" ng-view>
    </div>
</div>
<script src="//ajax.googleapis./ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="/resources/js/page/search/app.js"></script>
<script src="/resources/js/page/search/controllers.js"></script>

app.js

angular.module('MyApp', []).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
     when('/', {templateUrl:'/index.html', controller: MyController}).
     otherwise({redirectTo: '/'});
}]);

controller.js

var MyController=['$scope','$http','$location',function ($scope, $http, $location) {
   //do some fancy stuff
   if($scope.myAttribute===undefined){
      $scope.myAttribute=someDataFromHttpRequest;
   }
   $location.search(someParameters);
}];

index.html and host.jsp are not shown for brevity and their irrelevance.

The controller gets some data from Ajax request, stores some of it in the $scope to avoid requesting it again and the shows it to the user and waits for input. When the user selects some data in the view, I update URL query part to reflect selection changes. But I want to avoid subsequent Ajax requests by checking if the data is available in the $scope.

The problem I'm facing is that the $scope.myAttribute is always undefined. It resets on every request. I think I'm misusing AngularJS. Any clue?

• javascript
• angularjs

2 Answers 2

When you leave a controller, the scope gets destroyed. I would look into making a service that stores the stuff you want.

angular.module('MyApp', []).
    config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/', {templateUrl:'/index.html', controller: MyController}).
        otherwise({redirectTo: '/'});
}])
.service("myService", function(){
    this.myAttribute = null;
});

var MyController=['$scope','$http','$location', 'myService',function ($scope, $http,         $location, myService) {
   //do some fancy stuff
   if(myService.myAttribute===null){
      myService.myAttribute=someDataFromHttpRequest;
   }
   $location.search(someParameters);
}];

Services are used to share date between multiple controllers/directives so i'm pretty sure it's what you want.

Here's the doc information on them: http://docs.angularjs/guide/dev_guide.services.creating_services

You should use services (or $rootScope) to store the information you want to persist. Services are singletons and you can inject them in the controllers, anything you set there will persist in your application.

$scopes are deleted when you change the route so they won't persist.

Here is an example:

var myApp = angular.module('myApp',[]);
myApp.factory('SomeService', function() {
  return {
      myAttribute : '12345'
  };
});

var MyController=['$scope','$http','$location', 'myService', 'SomeService',function ($scope, $http, $location, myService, SomeService) {
   //do some fancy stuff
   SomeService.myAttribute; //this is how you access myAttribute
}];

Also I'd create a function inside the service to fetch the values you want via AJAX (instead of having it inside you controller), so the service would be something like:

myApp.factory('SomeService', function() {

    var SomeService = {};

    var myAttribute;

    SomeService.getMyAttribute = function () {

         if(!myAttribute) {

            //run ajax request then populate and return myAttribute

         }
         return myAttribute;
    };
    return SomeService;
});