在Angular JS中的控制器之间传递数据?

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

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?因为我的产品清单是硬编码的。

当前回答

我不知道它是否会帮助任何人，但基于Charx(谢谢!)的回答，我创建了简单的缓存服务。请随意使用、混音和分享:

angular.service('cache', function() {
    var _cache, _store, _get, _set, _clear;
    _cache = {};

    _store = function(data) {
        angular.merge(_cache, data);
    };

    _set = function(data) {
        _cache = angular.extend({}, data);
    };

    _get = function(key) {
        if(key == null) {
            return _cache;
        } else {
            return _cache[key];
        }
    };

    _clear = function() {
        _cache = {};
    };

    return {
        get: _get,
        set: _set,
        store: _store,
        clear: _clear
    };
});

2016-10-03 19:09:12

其他回答

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

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.

2015-02-12 18:08:47

为了改进@Maxim提出的使用$broadcast的解决方案，发送数据不改变

$rootScope.$broadcast('SOME_TAG', 'my variable');

而是监听数据

$scope.$on('SOME_TAG', function(event, args) {
    console.log("My variable is", args);// args is value of your variable
})

2017-01-04 15:04:33

在控制器之间共享数据的一个更简单的方法是使用嵌套的数据结构。而不是，例如

$scope.customer = {};

我们可以用

$scope.data = { customer: {} };

data属性将从父作用域继承，因此我们可以覆盖它的字段，保持来自其他控制器的访问。

2014-10-16 10:29:05

我不知道它是否会帮助任何人，但基于Charx(谢谢!)的回答，我创建了简单的缓存服务。请随意使用、混音和分享:

angular.service('cache', function() {
    var _cache, _store, _get, _set, _clear;
    _cache = {};

    _store = function(data) {
        angular.merge(_cache, data);
    };

    _set = function(data) {
        _cache = angular.extend({}, data);
    };

    _get = function(key) {
        if(key == null) {
            return _cache;
        } else {
            return _cache[key];
        }
    };

    _clear = function() {
        _cache = {};
    };

    return {
        get: _get,
        set: _set,
        store: _store,
        clear: _clear
    };
});

2016-10-03 19:09:12

使用angular service的一种方法是:

var app = angular.module("home", []);

app.controller('one', function($scope, ser1){
$scope.inputText = ser1;
});


app.controller('two',function($scope, ser1){
$scope.inputTextTwo = ser1;
});

app.factory('ser1', function(){
return {o: ''};
});



<div ng-app='home'>

<div ng-controller='one'>
  Type in text: 
  <input type='text' ng-model="inputText.o"/>
</div>
<br />

<div ng-controller='two'>
  Type in text:
  <input type='text' ng-model="inputTextTwo.o"/>
</div>

</div>

https://jsfiddle.net/1w64222q/

2016-12-07 18:51:08

在Angular JS中的控制器之间传递数据?

推荐文章

最新文章

标签