2012-12-18 2 views
6

템플릿 (index.html), 앱 정의(), 컨트롤러 정의 (controllers.js) 및 호스팅 페이지 (host.jsp)로 구성된 다음 AngularJS 애플리케이션이 있습니다. 다음

코드는 :

<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> 

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 또는 호스트 app.js

search.jsp. jsp는 간결함과 무관 함으로 표시되지 않습니다. vance.

컨트롤러는 Ajax 요청에서 일부 데이터를 가져 와서 다시 요청하지 않도록 컨트롤러의 일부를 $scope에 저장하고 사용자에게 보여주고 입력을 기다립니다. 사용자가보기에서 일부 데이터를 선택하면 선택 사항 변경 사항을 반영하도록 URL 쿼리 부분을 업데이트합니다. 하지만 데이터가 $scope에서 사용 가능한지 확인하여 후속 Ajax 요청을 피하기를 원합니다.

내가 직면 한 문제는 $scope.myAttribute이 항상 정의되지 않는다는 것입니다. 모든 요청에 ​​대해 재설정됩니다. 나는 AngularJS를 오용하고 있다고 생각합니다. 어떤 단서?

답변

13

컨트롤러에서 나가면 스코프가 삭제됩니다. 나는 당신이 원하는 물건을 저장하는 서비스를 만드는 방법을 조사 할 것이다.

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

서비스가 여러 컨트롤러 사이의 날짜를 공유하는 데 사용되는/지침은 그래서 당신이 원하는 그것의 확신 해요.

는 여기에 문서 정보 : 당신은 당신이 지속 할 정보를 저장하기 위해 (rootScope 또는 $) 서비스를 사용한다 http://docs.angularjs.org/guide/dev_guide.services.creating_services

4

. 서비스는 싱글 톤이며 컨트롤러에 삽입 할 수 있습니다. 사용자가 설정 한 모든 항목이 응용 프로그램에서 유지됩니다.

$ scope는 경로를 변경하면 삭제되지 않으므로 삭제됩니다. 서비스가 어떤 것, 그래서

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 (대신 당신이 컨트롤러 내부를 갖는)를 통해 원하는 값을 가져 오기 위해 서비스 내부 함수를 만드는 것 : 여기

은 예입니다 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; 
}); 
관련 문제