AngularJS - 在页面之间传递数据

时间:2014-03-14 15:08:24

标签: angularjs

我是AngularJS的首发。我正在尝试从以下位置发送数据:

  • 页面A:范列表页面

  • Page B:Van Update页面。

当用户点击面包车的更新链接时,我正在调用控制器并检索控制器中的面包车细节。但是,我无法使用相同的控制器将面包车细节分配给Page B(Van Update Page)...错误"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.

4 个答案:

答案 0 :(得分:122)

您需要创建一个服务才能在控制器之间共享数据。

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作为参数传递给控制器​​。

答案 1 :(得分:8)

如果您只需要在视图/范围/控制器之间共享数据,最简单的方法是将其存储在$ rootScope中。但是,如果您需要共享功能,最好定义一个服务来执行此操作。

答案 2 :(得分:7)

您应该做的是创建一个服务以在控制器之间共享数据。

很好的教程https://www.youtube.com/watch?v=HXpHV5gWgyk

答案 3 :(得分:-2)

app.factory('persistObject', function () {

        var persistObject = [];

        function set(objectName, data) {
            persistObject[objectName] = data;
        }
        function get(objectName) {
            return persistObject[objectName];
        }

        return {
            set: set,
            get: get
        }
    });

用这样的数据填充

persistObject.set('objectName', data); 

获取此类对象数据

persistObject.get('objectName');