Question

我有2个观点。 View1和View2。 View1旁边有产品和复选框列表，并提交按钮。 View2是显示从view1中选择的产品的页面。我的目标是将所选产品（使用复选框）从view1发送到view2。

这是我的代码..

 **<a href="/#/Details/{{cartprd}}" class="bg-white" ng-click="SendToCartPage(cartprd)">{{fff}}</a>**

 <tr>
     <td>
       **<input type="checkbox" ng-click="UpdateCart(tbl, $event)" ng-bind="tbl" id=" {{$index + 1}} " />**
     </td>
     <td>
       <div>
            <div class="thumbnail" ng-mouseover="getproductonhover()">
               <div class="caption">
                  <span class="">{{tbl.ProdName}}</span>
                  <p class="">{{tbl.ProdDescription}}</p>
               </div>
                  <img src="~/Images/imgcamera.jpg" class="imgproduct" />
            </div>
        </div>
      </td>
      <td>{{tbl.ProdName}}</td>
      <td>{{tbl.ProdDescription}}</td>
      <td>
        <a class="btn btn-primary" ng-click="GetSingleProduct(tbl)">Edit</a>
        </td>
  </tr>

Controller.js

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

视图2

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

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

Answer 1

要实现此目标，您可以使用angularjs 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
 }    
});

所以现在在控制器中注入此服务。当在view1中选中复选框时，使用setData推送所选数据。在View2中使用getData获取数据并显示它

所以实际上你的代码看起来像这样

app.controller('CartController', function ($scope, $routeParams, myService)
{
  $scope.SendToCartPage = function (cartprd) {       
    //get the checkboxes data here and push it        
    myService.set(cartprd);
}
});

Answer 2

我相信你的问题是SendToCartPage是一个函数而不是一个值。所以在View2中，当你告诉它显示SendToCartPage时，你没有传递任何参数，因此没有得到任何结果。

您可以修改SendToCartPage，而不是将参数存储在范围变量中，如下所示：

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

然后，您将修改View2代码，如下所示：

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

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

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

2 个答案: