控制器不在角JS通过服务相互交谈 [英] Controllers not talking to each other via service in Angular JS
问题描述
我试图从一个控制器将数据发送到另一个没有成功。我曾尝试采用了棱角分明的服务在Stack Overflow上找到所有的想法，我看不出有什么不对我的code。
我有一个第一控制器，列出了一些项目（CartSidebarCtrl）。它也有从列表中删除项目的能力。
我有应显示项目（TopCartCtrl）的数量另一个控制器。
在页面加载，第二控制器将显示物品的正确数量。但是，当我删除了第一个控制器的一些项目，二是没有更新。
我在做什么错在这里？
HTML code：
＆LT; DIV NG控制器=CartSidebarCtrl＆GT;
＆LT; UL＆GT;
＆LT;李NG重复=产品在产品＆GT;
{{product.name}}（小于跨度风格=颜色：蓝色;光标：指针NG点击=删除（$指数）＆GT;删除＆LT; / SPAN＆GT;）
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;＆LT; DIV NG控制器=TopCartCtrl＆GT;
＆LT;跨度＆GT; {{topCartText}}＆LT; / SPAN＆GT;
＆LT; / DIV＆GT;
角code：
magentoApp.factory（'cartModel'，函数（）{
变种cartModel = {}; cartModel.updateProducts =功能（产品）{
cartModel.products =产品;
}; 返回cartModel;
}）;magentoApp.controller（'CartSidebarCtrl'，['$范围，$ HTTP，cartModel'，函数（$范围，$ HTTP，cartModel）{
$ scope.products = [
{名称：'产品1'}，
{名称：'产品2'}
]; $ scope.remove =功能（$指数）{
$ scope.products.splice（$指数，1）;
updateTopCart（）;
} updateTopCart =功能（）{
cartModel.updateProducts（$ scope.products）;
} updateTopCart（）;
}]）;magentoApp.controller（'TopCartCtrl'，['$范围，cartModel'，函数（$范围，cartModel）{
$ scope.topCartText = cartModel.products.length;
}]）;
[使用更新code工作EDIT]
除了这个对象引用是不正确的用'M59'和'耶稣罗德里格斯'作为mentionned的事实，我呼吁对cartModel.products。长度。出于同样的原因，我的模板未更新。我的解决方案，然后通过产品反对模板并调用。长度在这个模板。然后，我想显示基于products.length不同的文本，并通过创建自定义过滤器做这项工作。
下面是正确code。
HTML
＆LT; DIV NG控制器=TopCartCtrl＆GT;
＆LT;跨度＆GT; {{products.length | topCartFilter}}＆LT; / SPAN＆GT;
＆LT; / DIV＆GT;＆LT; DIV NG控制器=CartSidebarCtrl＆GT;
＆LT; UL＆GT;
＆LT;李NG重复=产品在产品＆GT;
{{product.name}}（小于跨度风格=颜色：蓝色;光标：指针NG点击=删除（$指数）＆GT;删除＆LT; / SPAN＆GT;）
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
角：
magentoApp.factory（'cartModel'，函数（）{
VAR cartModel = {
产品：
{名称：'产品1'}，
{名称：'产品2'}
]
};
返回cartModel;
}）;magentoApp.filter（'topCartFilter'，函数（）{
复位功能（productsCount）{
返回（productsCount大于0）？ 你有''您的购物车的物品'+ productsCount +：你的车是空的;
};
}）;magentoApp.controller（'TopCartCtrl'，['$范围，cartModel'，函数（$范围，cartModel）{
$ scope.products = cartModel.products;
}]）;magentoApp.controller（'CartSidebarCtrl'，['$范围，cartModel'，函数（$范围，cartModel）{
$ scope.products = cartModel.products; $ scope.remove =功能（$指数）{
$ scope.products.splice（$指数，1）;
}
}]）;
我只记得我已经回答了这个位置：<一href=\"http://stackoverflow.com/questions/18525121/how-to-share-data-between-controllers-in-angularjs/\">How分享在angularjs
控制器之间的数据 VAR应用= angular.module（'对myApp'，[]）;app.factory（'为myService'，函数（）{
VAR为myService = {
富：'棒'
};
返回为myService;
}）;app.controller（'myCtrl1'，函数（为myService）{
的console.log（myService.foo）;
myService.foo ='再也没有吧！;
}）;app.controller（'myCtrl2'，函数（为myService）{
的console.log（myService.foo）;
}）;
您需要做的是再设置你的 $ scope.cartModel = cartModel 键，那么你可以做这样的事情 NG-模型的唯一的事情= cartModel.someProp任何变化有更新你的服务，财产，因此升级到任何 $ scope.cartModel 被引用服务对象。
I am trying to send data from one controller to another with no success. I have tried all ideas found on Stack Overflow using Angular services and I can't see what's wrong with my code.
I have a first controller that lists some items (CartSidebarCtrl). It also has the ability to remove items from the list.
I have another controller that should display the number of items (TopCartCtrl).
On page load, the second controller displays the correct number of items. But when I remove some items in the first controller, the second is not updated.
What am I doing wrong here ?
HTML Code:
<div ng-controller="CartSidebarCtrl">
<ul>
<li ng-repeat="product in products">
{{product.name}} (<span style="color: blue; cursor: pointer" ng-click="remove($index)">Remove</span>)
</li>
</ul>
</div>
<div ng-controller="TopCartCtrl">
<span>{{topCartText}}</span>
</div>
Angular Code:
magentoApp.factory('cartModel', function () {
var cartModel = {};
cartModel.updateProducts = function(products) {
cartModel.products = products;
};
return cartModel;
});
magentoApp.controller('CartSidebarCtrl', ['$scope', '$http', 'cartModel', function($scope, $http, cartModel) {
$scope.products = [
{ name: 'Product 1' },
{ name: 'Product 2' }
];
$scope.remove = function($index) {
$scope.products.splice($index, 1);
updateTopCart();
}
updateTopCart = function() {
cartModel.updateProducts($scope.products);
}
updateTopCart();
}]);
magentoApp.controller('TopCartCtrl', ['$scope', 'cartModel', function($scope, cartModel) {
$scope.topCartText = cartModel.products.length;
}]);
[EDIT WITH UPDATED CODE WORKING]
Beside the fact that object reference was not correct as mentionned by 'm59' and 'Jesus Rodriguez', I was calling for .length on cartModel.products. For the same reason, my template was not updated. My solution is then to pass the products object to the template and call .length on this template. Then, I wanted to display a different text based on products.length and made this work by creating a custom filter.
Here is the correct code.
HTML:
<div ng-controller="TopCartCtrl">
<span>{{products.length | topCartFilter}}</span>
</div>
<div ng-controller="CartSidebarCtrl">
<ul>
<li ng-repeat="product in products">
{{product.name}} (<span style="color: blue; cursor: pointer" ng-click="remove($index)">Remove</span>)
</li>
</ul>
</div>
Angular:
magentoApp.factory('cartModel', function() {
var cartModel = {
products: [
{ name: 'Product 1' },
{ name: 'Product 2' }
]
};
return cartModel;
});
magentoApp.filter('topCartFilter', function() {
return function(productsCount) {
return (productsCount > 0) ? 'You have ' + productsCount + ' items in your cart': 'Your cart is empty';
};
});
magentoApp.controller('TopCartCtrl', ['$scope', 'cartModel', function($scope, cartModel) {
$scope.products = cartModel.products;
}]);
magentoApp.controller('CartSidebarCtrl', ['$scope', 'cartModel', function($scope, cartModel) {
$scope.products = cartModel.products;
$scope.remove = function($index) {
$scope.products.splice($index, 1);
}
}]);
I just remembered I already answered this here: How to share data between controllers in angularjs
var app = angular.module('myApp', []);
app.factory('myService', function() {
var myService = {
foo: 'bar'
};
return myService;
});
app.controller('myCtrl1', function(myService) {
console.log(myService.foo);
myService.foo = 'not bar anymore!';
});
app.controller('myCtrl2', function(myService) {
console.log(myService.foo);
});
The only thing you need to do is then set your $scope.cartModel = cartModel and then you could do things like ng-model="cartModel.someProp" and any change there is updating that property in your service and thus updating it to any $scope.cartModel that is referencing the service object.
这篇关于控制器不在角JS通过服务相互交谈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
