我有一个显示产品的基本控制器,

App.controller('ProductCtrl',function($scope,$productFactory){
     $productFactory.get().success(function(data){
           $scope.products = data;
     });
});

在我看来,我是在一个列表中显示这些产品

<ul>
    <li ng-repeat="product as products">
        {{product.name}}
    </li>
</ul

我试图做的是,当有人点击产品名称时,我有另一个名为购物车的视图,该产品被添加。

 <ul class="cart">
      <li>
          //click one added here
      </li>
      <li>
          //click two added here
      </li>
 </ul>

我的疑问是,如何将点击的产品从第一个控制器传递到第二个控制器?我认为cart也应该是一个控制器。

我处理点击事件使用指令。我也觉得我应该使用服务来实现上述功能,只是不明白如何?因为购物车将被预定义的产品数量添加可能是5/10取决于哪个页面的用户。所以我想保持它的一般性。

更新:

我创建了一个广播服务,在第二个控制器我接收它。现在的问题是如何更新dom?因为我的产品清单是硬编码的。


当前回答

我已经创建了一个工厂来控制路由路径模式之间的共享作用域,因此您可以在用户在相同的路由父路径中导航时维护共享数据。

.controller('CadastroController', ['$scope', 'RouteSharedScope',
    function($scope, routeSharedScope) {
      var customerScope = routeSharedScope.scopeFor('/Customer');
      //var indexScope = routeSharedScope.scopeFor('/');
    }
 ])

因此,如果用户转到另一个路由路径,例如'/Support',路径'/Customer'的共享数据将被自动销毁。但是,如果用户去到“子”路径,比如“/Customer/1”或“/Customer/list”,作用域不会被销毁。

您可以在这里看到一个示例:http://plnkr.co/edit/OL8of9

其他回答

如何通过这个点击产品从第一个控制器到第二个?

点击你可以调用调用广播的方法:

$rootScope.$broadcast('SOME_TAG', 'your value');

第二个控制器会监听这个标签,像这样:

$scope.$on('SOME_TAG', function(response) {
      // ....
})

因为我们不能将$scope注入到服务中,所以没有什么东西可以像单一的$scope一样。

但我们可以注入$rootScope。因此,如果您将值存储到服务中,您可以运行$rootScope。$broadcast('SOME_TAG', '你的值');在服务主体中。(参见@Charx服务描述)

app.service('productService',  function($rootScope) {/*....*/}

请查看关于$broadcast, $emit的好文章

从描述来看,似乎您应该使用服务。查看http://egghead.io/lessons/angularjs-sharing-data-between-controllers和AngularJS服务在控制器之间传递数据的例子。

你可以这样定义你的产品服务(作为一个工厂):

app.factory('productService', function() {
  var productList = [];

  var addProduct = function(newObj) {
      productList.push(newObj);
  };

  var getProducts = function(){
      return productList;
  };

  return {
    addProduct: addProduct,
    getProducts: getProducts
  };

});

依赖项将服务注入到两个控制器中。

在你的ProductController中,定义一些动作,将选择的对象添加到数组中:

app.controller('ProductController', function($scope, productService) {
    $scope.callToAddToProductList = function(currObj){
        productService.addProduct(currObj);
    };
});

在你的CartController中,从服务中获取产品:

app.controller('CartController', function($scope, productService) {
    $scope.products = productService.getProducts();
});

有两种方法可以做到这一点。

By using $rootscope, but I don't reccommend this. The $rootScope is the top-most scope. An app can have only one $rootScope which will be shared among all the components of an app. Hence it acts like a global variable. Using services. You can do this by sharing a service between two controllers. Code for service may look like this: app.service('shareDataService', function() { var myList = []; var addList = function(newObj) { myList.push(newObj); } var getList = function(){ return myList; } return { addList: addList, getList: getList }; }); You can see my fiddle here.

var custApp = angular.module("custApp", [])
.controller('FirstController', FirstController)
.controller('SecondController',SecondController)
.service('sharedData', SharedData);

FirstController.$inject = ['sharedData'];
function FirstController(sharedData) {
this.data = sharedData.data;
}

SecondController.$inject['sharedData'];
function SecondController(sharedData) {
this.data = sharedData.data;
}

function SharedData() {
this.data = {
    value: 'default Value'
}
}

第一个控制器

<div ng-controller="FirstController as vm">
<input type=text ng-model="vm.data.value" />
</div>

第二个控制器

 <div ng-controller="SecondController as vm">
    Second Controller<br>
    {{vm.data.value}}
</div>

有三种方法,

A)使用服务

b)利用控制器作用域间依赖的父/子关系。

c)在Angular 2.0中,“As”关键字将把数据从一个控制器传递到另一个控制器。

如需更多信息,请查看以下链接:

http://www.tutorial-points.com/2016/03/angular-js.html