无法在AngularJS应用程序的一个控制器中在两个视图之间传递数据。

10 浏览
0 Comments

无法在AngularJS应用程序的一个控制器中在两个视图之间传递数据。

我有两个视图，View1和View2。View1上有一个产品列表，旁边有复选框和提交按钮。View2是显示从View1选择的产品的页面。我的目标是将从View1中选择的产品（使用复选框）发送到View2。

以下是我的代码：

**{{fff}}**
 
     
       ****
     
     
                  {{tbl.ProdName}}
                  
{{tbl.ProdDescription}}
                  
      
      {{tbl.ProdName}}
      {{tbl.ProdDescription}}
      
        Edit

Controller.js

app.controller('CartController', function ($scope, $routeParams) {
  $scope.SendToCartPage = function (cartprd) {       
    return cartprd;
}
});

View2

{{SendToCartPage}}

我在View2中看到一个空页面。有人可以告诉我我做错了什么吗？我注意到的一件事是当我将$scope.SendToCartPage = "mystring"时，我可以在View2中看到"mystring"。

0

2 答案

0 Comments

问题出现的原因是SendToCartPage是一个函数而不是一个值。在View2中，当你告诉它显示SendToCartPage时，你没有传递任何参数，因此没有得到任何返回结果。

你可以修改SendToCartPage函数，将参数存储在一个作用域变量中，代码如下：

$scope.SendToCartPage = function (cartprd) {       
    $scope.cartContents = cartprd;
}

然后你需要修改View2的代码如下：

<div ng-controller="CartController">
    {{cartContents}} 
</div>

我猜你可能希望购物车内容可以包含多个物品。在这种情况下，你可以修改函数，使cartContents成为一个数组（每次调用时将参数添加到数组中），并且你可以在视图中使用ng-repeat来显示数组中的每个项目。

是的，我相信这个回答对你的问题有更完整的解答。如果你有两个关联不同控制器的视图（每个视图应该有自己的控制器），那么在它们之间共享数据的最佳方式是使用服务。

我只有一个控制器而不是两个。

我建议为每个视图都有一个单独的控制器，因为这是最佳实践，当在不同视图之间共享控制器时可能会遇到问题（详情请参见这个回答）

0
0 Comments

在AngularJS应用程序中，无法从一个控制器将数据传递给两个视图之间的问题可能是由于以下原因导致的：

1.没有适当地创建和使用一个service来组织和共享代码。在这种情况下，可以创建一个基本的service来保存和获取数据。

解决方法是创建一个service，如下所示：

var appmodule = angular.module('myModule', []);
appmodule.factory('myService', function() {
    var savedCheckedData = {}
    function setData(data) {
        savedCheckedData = data;
    }
    function getData() {
        return savedCheckedData;
    }    
    return {
        set: setData,
        get: getData
    }    
});

2.在控制器中注入该service，并在`view1`中选择复选框时使用`setData`将选定的数据保存起来。在`View2`中使用`getData`获取数据并显示出来。

解决方法是注入该service并在控制器中使用`setData`方法来保存数据：

app.controller('CartController', function ($scope, $routeParams, myService) {
    $scope.SendToCartPage = function (cartprd) {       
        // 在这里获取复选框的数据并保存
        myService.set(cartprd);
    }
});

3.在其他视图中使用`myService.get()`来获取保存的数据。

解决方法是在其他视图中使用`myService.get()`来获取保存的数据。

最终，通过使用service来保存和获取数据，我们成功解决了从一个控制器将数据传递给两个视图之间的问题。

0