AngularJS와는 : 동일한 컨트롤러와 다른 하나 개의보기에서 데이터를 전달

Question

요약 :

내 각 애플리케이션의 뷰 (first) 및 제출에 아약스 호출에서 성공 응답의 형태를 갖는다 사용자를보기로 리디렉션합니다 (second). 이 응용 프로그램에는 컨트롤러가 하나만 있습니다 (for all view). 여기서, 사용자는 도면에 표시 취득한다 뷰 (first)에서 형태의 필드를 입력 (second) & 다시 사용자가 필드들을 입력 할 수있는 뷰 (second)의 형태로 존재 보기에 표시되어야하는 양식 (third). 다른 하나 개의 관점에서 하나 service에 set&get 데이터를 생성하여 다른 뷰 공유를 하나의 뷰로부터 데이터를 전송하는 애플리케이션에 걸쳐이 서비스를 이용 쓸만 동일한 컨트롤러 공유하는 모든 뷰 (first,second,third)로서

같은 컨트롤러.

문제 문 :

난 내가 모든 응용 프로그램에서 동일한 서비스에서 데이터를 얻고 같은 별도의 변수에 각 양식에 데이터를 저장할 수 없습니다입니다.

도 :

서비스 각도에서 싱글과 마찬가지로. 따라서 다른 페이지로 이동할 때 다시 생성되지 않습니다. 컨트롤러에서 dataService.setData() 메서드를 호출하면 서비스에 저장된 이전 데이터가 제거되고 문제가되는 새로운 데이터로 업데이트됩니다. 서로 재정의하는 대신 모든 뷰 데이터를 별도로 저장하려고합니다.

Answer 1

당신이 에 대한 몇 가지 키 각 다른보기를를 만들 컨트롤러, 말할 수 :

this.keys = { 
    "firstView": "firstView", 
    "secondView": "secondView", 
    "thirdView": "thirdView", 
} 

을하고 setData 메서드를 호출 할 때 data가 저장 될 수신 및 key이

을 말할 수

dataService.setData(data, keys.firstView) 

getData이므로 수 있습니다. 이

dataService.getData(keys.firstView) 

처럼 싶어 데이터를 전자 지금 당신의 DataService은 다음과 같이해야합니다 :

angular.module('app').service('dataService', function() { 
    var s = {}; 
    function setData(data, key){ 
     s[key] = data; 
    } 

    function getData(key){ 
     return s[key]; 
    } 
}) 

Answer 2

이와 같이 '저장된'값이있는 팩토리를 사용하십시오. 각보기마다 식별자를 추가하여 해시 테이블처럼 작동합니다.

.factory('storeValue', function() { 
    var valueStored= {}; 
    return { 
     getValue: function(viewId) { 
      return valueStored[viewId]; 
     }, 
     setValue: function(newValue,viewId) { 
      valueStored[viewId] = newValue 
     } 
     deleteOrder: function(viewId) { 
      delete valueStored[viewId]; 
     } 
    }; 
}) 

이 당신의보기 중 하나에 대한 컨트롤러이며,

$scope.setData = function(){ 
    storeValue.setValue('value for First View', $state.current.name); 
} 

$scope.getData = function(){ 
    storeValue.getValue($state.current.name); // This will return the String 'value for First View' 
} 

따라서 위 공장 종속성으로, 당신은 가치와 처음보기에 대한 식별자를 설정합니다 가정합시다. 현재 View를 나타내는 $ state 객체는 해당 View의 ID로 작동합니다. 그리고 데이터를 잃지 않고 나머지보기에서도 동일한 작업을 수행 할 수 있습니다.

Answer 3

당신이 ui-router을 사용하는 경우 한 상태에서 데이터를 전달하는 PARAMS을 사용할 수 있습니다 다른 주. 그래서 예를 들면

당신의 세 가지 상태 (더하기 하나의 추상 부모) : (제출 그런

$stateProvider.state('parent', { 
    abstract: true, 
    param: { 
    propertyOne: null, 
    propertyTwo: null 
    } 
}) 
.state('parent.first', { 
    controller: YourController, 
    params: { 
    propertyOne: null, 
    propertyTwo: null 
    } 
}) 
...repeat for all the other states you want with the params 

)가 발사됩니다 당신은 $는 변수를 전달할 수 state.go가 호출 할 수

을

$state.go("seconds", { propertyOne: 'one', propertyTwo: 'two' }, { inherit:false }); 

Answer 4

가장 쉽고 현명한 해결책은 AngularJS의 부모 자식 관계를 사용하는 것입니다. 뷰 데이터를 저장하는 데 서비스를 사용하는 것이 더 강력합니다.

부모 컨트롤러가 있다고 가정합니다. 부모 컨트롤러 아래에는 firstStepCtrl, secondStepCtrl, thirdStepCtrl 및 등과 같이 자식 컨트롤러가 있습니다. 상위 컨트롤러의 데이터는 자식 컨트롤러에서 공유됩니다. 따라서 부모 컨트롤러에 모델을 설정하고 해당 자식 컨트롤러에 모델을 바인딩하면 부모 컨트롤러 에 저장되어있는 상태로 단계간에 이동합니다.

예제 코드

$scope.model={ 
    firstStep:{}, 
    SecondStep:{}, 
    thirdStep:{} 
    currentStep:0, 
    steps:['step1','step2','step3'] 
} 



<div ng-controller="parentCtrl"> 

<div ng-include="model.steps[currentStep]"> 
</div> 

</div> 


<script type="text/ng-template" id="step1"> 
<div ng-controller="firstStepCtrl"> 
<h1>Step 1</h1> 
<input type"text" ng-model="model.firstStep.name"/> 
</div> 
</script> 

<script type="text/ng-template" id="step2"> 
<div ng-controller="secondStepCtrl"> 
<h1>Step 2</h1> 
<input type"text" ng-model="model.SecondStep.name"/> 
</div> 
</script> 


<script type="text/ng-template" id="step3"> 
<div ng-controller="thirdStepCtrl"> 
<h1>Step 3</h1> 
<input type"text" ng-model="model.thirdStep.name"/> 
</div> 
</script> 

당신이 모든 단계 모델은 부모 컨트롤러에 저장하고 쉽게 액세스 할 수 있습니다 볼 수 있듯이. 나는 uirouter 대신에 ng-include를 사용했다. 탐색을 위해 currentStep을 감소시킬 수있다.

희망이 있습니다.