Warum werden meine $ scope-Attribute in meiner AngularJS-Anwendung zurückgesetzt?

Question

Ich habe die folgende AngularJS-Anwendung, bestehend aus einer Vorlage (index.html), einer App-Definition (app.js), einer Controller-Definition (controllers.js) und einer Hosting-Seite (host.jsp).

Der Code lautet wie folgt:

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 und Wirt. jsp werden der Kürze halber nicht gezeigt und sind irrelevant Vance.

Der Controller erhält einige Daten von Ajax Anfrage, speichert einige davon in der $scope, um zu vermeiden, es erneut anfordert und das zeigt es dem Benutzer und wartet auf Eingabe. Wenn der Benutzer einige Daten in der Ansicht auswählt, aktualisiere ich den URL-Abfrageteil, um Auswahländerungen widerzuspiegeln. Aber ich möchte nachfolgende Ajax-Anfragen vermeiden, indem ich überprüfe, ob die Daten im $scope verfügbar sind.

Das Problem, mit dem ich konfrontiert bin, ist, dass die $scope.myAttribute immer undefiniert ist. Es wird bei jeder Anfrage zurückgesetzt. Ich denke, ich missbrauche AngularJS. Irgendeine Ahnung?

Answer 1

Wenn Sie eine Steuerung verlassen, wird das Oszilloskop zerstört. Ich würde versuchen, einen Dienst zu erstellen, der die gewünschten Inhalte speichert.

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

Dienste werden verwendet, um Datum zwischen mehreren Controllern/Direktiven zu teilen, also bin ich ziemlich sicher, dass es das ist, was Sie wollen.

Hier ist die doc Informationen über sie: http://docs.angularjs.org/guide/dev_guide.services.creating_services

Answer 2

Sie Dienste verwenden sollten (oder $ rootScope) die Informationen, die Sie anhalten wollen zu speichern. Services sind Singletons und Sie können sie in die Controller injizieren, alles, was Sie dort setzen, wird in Ihrer Anwendung bestehen.

$ Bereiche werden gelöscht, wenn Sie die Route ändern, damit sie nicht bestehen bleiben. Hier

ein Beispiel:

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

Auch würde ich eine Funktion in den Dienst erstellen, um die Werte zu holen Sie über AJAX wollen (statt es mit in dir Controller), so dass der Service etwas wäre wie:

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