programing

AngularJS-페이지 간 데이터 전달

nasanasas 2020. 11. 14. 10:17
반응형

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

반응형