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

标签: jQuery AngularJS
发布时间: 2017/4/16 16:29:45
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我有 2 的意见。View1 和视图 2。 View1 具有列表的产品和它旁边的复选框和提交按钮。视图 2 是显示从 view1 所选产品的页面。我的目标是将产品 (使用复选框) 选择从 view1 发送到视图 2。

这里是我的代码。

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

我看到一个空白的网页的视图 2。谁能告诉我我做的错了甚么?我注意到的一件事是我做的时候 $scope.SendToCartPage = "mystring" 然后我可以看到 "mystring" 在视图 2。

解决方法 1:

要实现这一目标可以使用 angularjs 的服务,帮助组织和在您的应用程序之间共享代码。

因此,创建这样的基本服务

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);
}
});
官方微信
官方QQ群
31647020