반응형
AngularJS-페이지 간 데이터 전달
저는 AngularJS 스타터입니다. 다음에서 데이터를 보내려고합니다.
페이지 A : 밴 목록 페이지
...에
- 페이지 B : Van 업데이트 페이지.
사용자가 밴에 대한 업데이트 링크를 클릭하면 컨트롤러를 호출하고 컨트롤러에서 밴 세부 정보를 검색합니다. 하지만 동일한 컨트롤러를 사용하여 페이지 B (밴 업데이트 페이지)에 밴 세부 정보를 할당 할 수 없습니다. 오류"Cannot set property 'vanNumber' of undefined"
*** Page A: Van List ****
<form name="listVanForm" >
<table>
<tr> <td ng-controller="VanUpdateCtrl"><a href="#/van-update" ng-click="prePopulateForm(row.members.vanNumber.value )" class="btn btn-small btn-primary">update</a></td> </tr>
</table>
</form>
*** Page B: Van Update ****
<div class="container">
<h2>Edit Van </h2>
<form name="updateVanForm" novalidate="novalidate" class="form-horizontal" ng-submit="updateCard(formData)">
<div class="control-group">
<label class="control-label" >Van Number:</label>
<div class="controls">
<input type="text" id="vanNumber" ng-model="formData.vanNumber" placeholder=""/>
</div>
</div>
</form>
</div>
*** VanUpdateCtrl **
app.controller('VanUpdateCtrl', ['$scope', 'VanUpdateFactory', '$location',
function ($scope, VanUpdateFactory, $location) {
//callback for ng-init 'populateDD':
$scope.prePopulateForm = function (cardNoParam m) {
alert('cardNo = '+cardNoParam);
$scope.formData.cardNumber=cardNoParam;}
}
So, $scope.formData.cardNumber OR $scope.formData in the destination page is not recognised.
컨트롤러간에 데이터를 공유하려면 서비스를 만들어야합니다.
app.factory('myService', function() {
var savedData = {}
function set(data) {
savedData = data;
}
function get() {
return savedData;
}
return {
set: set,
get: get
}
});
컨트롤러 A에서 :
myService.set(yourSharedData);
컨트롤러 B에서 :
$scope.desiredLocation = myService.get();
myService를 매개 변수로 전달하여 컨트롤러에 삽입해야합니다.
뷰 / 범위 / 컨트롤러간에 데이터 만 공유해야하는 경우 가장 쉬운 방법은 $ rootScope에 저장하는 것입니다. 그러나 공유 기능이 필요한 경우이를 수행 할 서비스를 정의하는 것이 좋습니다.
해야 할 일은 컨트롤러간에 데이터를 공유하는 서비스를 만드는 것입니다.
Nice tutorial https://www.youtube.com/watch?v=HXpHV5gWgyk
app.factory('persistObject', function () {
var persistObject = [];
function set(objectName, data) {
persistObject[objectName] = data;
}
function get(objectName) {
return persistObject[objectName];
}
return {
set: set,
get: get
}
});
Fill it with data like this
persistObject.set('objectName', data);
Get the object data like this
persistObject.get('objectName');
참고URL : https://stackoverflow.com/questions/22408790/angularjs-passing-data-between-pages
반응형
'programing' 카테고리의 다른 글
git-끌어 오기를 시도하고 혼란스러운 메시지를받는 새로운 사용자 (0) | 2020.11.14 |
---|---|
CSS ": hover"를 활성화하는 순수 JavaScript에서 마우스 오버를 어떻게 시뮬레이션합니까? (0) | 2020.11.14 |
Python 피클 오류 : UnicodeDecodeError (0) | 2020.11.14 |
docker compose 빌드 단일 컨테이너 (0) | 2020.11.14 |
C # 7 : Out 변수의 밑줄 (_) 및 별표 (*) (0) | 2020.11.14 |