मेरे $ scope विशेषताएँ मेरे AngularJS एप्लिकेशन में रीसेट क्यों रहती हैं?

Question

मेरे पास एक टेम्पलेट (index.html), एक एप परिभाषा (app.js), एक नियंत्रक परिभाषा (controllers.js) और एक होस्टिंग पृष्ठ (host.jsp) से बना निम्नलिखित AngularJS अनुप्रयोग है।

कोड इस प्रकार है:

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 और मेजबान। jsp brevity और उनके irrele के लिए नहीं दिखाया जाता है वेंस।

नियंत्रक को अजाक्स अनुरोध से कुछ डेटा मिलता है, इसे फिर से अनुरोध करने से बचने के लिए $scope में कुछ स्टोर करता है और इसे उपयोगकर्ता को दिखाता है और इनपुट के लिए इंतजार करता है। जब उपयोगकर्ता दृश्य में कुछ डेटा चुनता है, तो मैं चयन परिवर्तनों को दर्शाने के लिए URL क्वेरी भाग अपडेट करता हूं। लेकिन मैं $scope में डेटा उपलब्ध है या नहीं, यह जांच कर बाद के अजाक्स अनुरोधों से बचना चाहता हूं।

मुझे जिस समस्या का सामना करना पड़ रहा है वह यह है कि $scope.myAttribute हमेशा अनिर्धारित है। यह हर अनुरोध पर रीसेट करता है। मुझे लगता है कि मैं AngularJS का दुरुपयोग कर रहा हूँ। कोई सुराग?

Answer 1

जब आप नियंत्रक छोड़ते हैं, तो दायरा नष्ट हो जाता है। मैं ऐसी सेवा बनाने में देखता हूं जो आपके इच्छित सामानों को संग्रहीत करता है।

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

सेवाओं का उपयोग एकाधिक नियंत्रकों/निर्देशों के बीच तिथि साझा करने के लिए किया जाता है, इसलिए मुझे पूरा यकीन है कि आप यही चाहते हैं।

यहाँ उन पर डॉक जानकारी है: http://docs.angularjs.org/guide/dev_guide.services.creating_services

Answer 2

आप सेवाओं (या $ rootScope) का उपयोग करना चाहिए जानकारी आप बनाए रखना चाहते स्टोर करने के लिए। सेवाएं सिंगलेट हैं और आप उन्हें नियंत्रकों में इंजेक्ट कर सकते हैं, आपके द्वारा सेट की गई कोई भी चीज़ आपके एप्लिकेशन में जारी रहेगी।

$ जब आप मार्ग बदलते हैं तो $ स्कॉप्स हटा दिए जाते हैं ताकि वे बने रहें। ,

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

इसके अलावा, मैं मान आप AJAX (बजाय अंदर आप नियंत्रक यह होने के) के माध्यम से चाहते हैं लाने के लिए सेवा के अंदर एक समारोह बनाएंगे, तो सेवा कुछ होगा:

यहाँ एक उदाहरण है जैसे:

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