Perché i miei attributi $ scope continuano a essere ripristinati nella mia applicazione AngularJS?

Question

Ho la seguente applicazione AngularJS composta da un modello (index.html), una definizione di app (app.js), una definizione di controller (controllers.js) e una pagina di hosting (host.jsp).

Il codice è il seguente:

search.jsp

<div class="container-fluid" ng-app="facetedSearch"> 
    <div class="row-fluid" ng-view> 
    </div> 
</div> 
<script src="//ajax.googleapis.com/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 e host. jsp non viene mostrato per brevità e il loro irrele Vance.

Il controller riceve alcuni dati dalla richiesta Ajax, ne memorizza alcuni nello $scope per evitare di richiederlo nuovamente e lo mostra all'utente e attende l'input. Quando l'utente seleziona alcuni dati nella vista, aggiorno la parte della query URL per riflettere le modifiche alla selezione. Ma voglio evitare successive richieste Ajax controllando se i dati sono disponibili nello $scope.

Il problema che sto affrontando è che il $scope.myAttribute è sempre indefinito. Si reimposta su ogni richiesta. Penso che sto usando male AngularJS. Qualche indizio?

Answer 1

Quando si lascia un controller, l'oscilloscopio viene distrutto. Guarderei nel fare un servizio che memorizza le cose che vuoi.

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); 
}]; 

servizi sono utilizzati per condividere data fra le più controllori/direttive quindi sono abbastanza sicuro che è quello che vuoi.

Ecco le informazioni doc su di loro: http://docs.angularjs.org/guide/dev_guide.services.creating_services

Answer 2

Si dovrebbe utilizzare i servizi (o $ rootScope) per memorizzare le informazioni desiderate a persistere. I servizi sono singleton e li puoi iniettare nei controller, qualsiasi cosa tu abbia impostato rimarrà nella tua applicazione.

Gli ambiti $ vengono cancellati quando si modifica il percorso in modo che non persistano.

Ecco un esempio:

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 
}]; 

Inoltre mi piacerebbe creare una funzione all'interno del servizio per recuperare i valori desiderati tramite la tecnologia AJAX (invece di avere dentro di te Controller), in modo che il servizio sarebbe qualcosa Mi piace:

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; 
});