AngularJS - 在页面之间传递数据 [英] AngularJS - Passing data between pages

问题描述

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

• 页面 A:货车列表页面

  到

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

当用户单击货车的更新链接时，我正在调用控制器并在控制器中检索货车详细信息.但是，我无法使用相同的控制器将货车详细信息分配给页面 B(货车更新页面)...错误 "Cannot set property 'vanNumber' of undefined"

*** Page A: Van List ****<表单名称=listVanForm"><表格><tr><td ng-controller="VanUpdateCtrl"><a href=#/van-update"ng-click="prePopulateForm(row.members.vanNumber.value)";class=btn btn-small btn-primary">更新</a></td></tr></表单>*** 页 B:货车更新 ****<div class="container"><h2>编辑范</h2><表单名称=updateVanForm"novalidate=novalidate"类=形式水平"ng-submit="updateCard(formData)"><div class="control-group"><label class="control-label";>货车编号:</label><div class="controls"><输入类型=文本"id=vanNumber"ng-model=formData.vanNumber"占位符="/>

</表单>

*** VanUpdateCtrl **app.controller('VanUpdateCtrl', ['$scope', 'VanUpdateFactory', '$location',函数($scope，VanUpdateFactory，$location){//ng-init 'populateDD' 的回调:$scope.prePopulateForm = 函数(cardNoParam m){alert('cardNo = '+cardNoParam);$scope.formData.cardNumber=cardNoParam;}}因此，无法识别目标页面中的 $scope.formData.cardNumber OR $scope.formData.

解决方案

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

app.factory('myService', function() {变量保存数据 = {}功能集(数据){保存的数据 = 数据；}函数获取(){返回保存的数据；}返回 {设置:设置，得到:得到}});

在您的控制器 A 中:

myService.set(yourSharedData);

在您的控制器 B 中:

$scope.desiredLocation = myService.get();

记得将 myService 作为参数传递到控制器中.

I am an AngularJS starter. I am trying to send data from :

• Page A : Van Listing page

  to

• Page B: Van Update page.

When user click the update link for a van, I am invoking a controller and retrieving the van details in the controller. But, I cannot assign the van details to the Page B ( Van Update Page) using the same controller... Error "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.

解决方案

You need to create a service to be able to share data between controllers.

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

 return {
  set: set,
  get: get
 }

});

In your controller A:

myService.set(yourSharedData);

In your controller B:

$scope.desiredLocation = myService.get();

Remember to inject myService in the controllers by passing it as a parameter.

这篇关于AngularJS - 在页面之间传递数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！