AngularJS - 在页面之间传递数据

Question

我是 AngularJS 初学者。我正在尝试从以下位置发送数据:

• 页面 A:货车列表页面

  至

• 页面 B:货车更新页面。

当用户单击货车的更新链接时，我将调用 Controller 并检索 Controller 中的货车详细信息。但是，我无法使用相同的 Controller 将货车详细信息分配给页面 B(货车更新页面)...错误 “无法设置未定义的属性 'vanNumber'”

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

Answer 1

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

app.factory('myService', function() {
 var savedData = {}
 function set(data) {
   savedData = data;
 }
 function get() {
  return savedData;
 }

 return {
  set: set,
  get: get
 }

});

在你的 Controller A中:

myService.set(yourSharedData);

在你的 Controller B 中:

$scope.desiredLocation = myService.get();

记住将 myService 作为参数传递到 Controller 中。