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

当前回答

在你的模块中创建一个工厂，并在控制器中添加一个工厂的引用，并在控制器中使用它的变量，现在通过在任何你想要的地方添加引用来获得另一个控制器中的数据值

2016-06-28 09:03:14

其他回答

angular.module('testAppControllers', [])
    .controller('ctrlOne', function ($scope) {
        $scope.$broadcast('test');
    })
    .controller('ctrlTwo', function ($scope) {
        $scope.$on('test', function() {
        });
    });

2016-01-26 08:32:33

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

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

$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的好文章

2013-11-24 21:42:44

2016-06-28 09:03:14

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>

2017-10-01 11:22:16

using $localStorage

app.controller('ProductController', function($scope, $localStorage) {
    $scope.setSelectedProduct = function(selectedObj){
        $localStorage.selectedObj= selectedObj;
    };
});

app.controller('CartController', function($scope,$localStorage) { 
    $scope.selectedProducts = $localStorage.selectedObj;
    $localStorage.$reset();//to remove
});

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

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

and the second controller will listen on this tag like:
$scope.$on('SOME_TAG', function(response) {
      // ....
})

using $rootScope:

window.sessionStorage.setItem("Mydata",data);
$scope.data = $window.sessionStorage.getItem("Mydata");

使用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: ''};
});

2017-11-06 11:28:53

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

推荐文章

最新文章

标签