角：如何从工厂$广播？ [英] Angular: How to $broadcast from Factory?
本文介绍了角：如何从工厂$广播？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个项目清单，我需要在每当一个新的项目添加导航栏，以得到一个消息（话说添加的项目！）。
函数的addItem（）（在Add Item按钮NG-点击）是ItemFactory，并从那里我似乎无法播放。
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;链接rel =stylesheet属性HREF =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css＆GT;
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js＆GT;＆下; /脚本＆GT;
＆LT; /头＆GT; ＆LT;机身NG-应用=MyApp的NG控制器=MainCtrl＆GT;
＆LT; DIV＆GT; {{文字}} ＆LT;导航类=导航栏导航栏逆NG控制器=NavCtrl＆GT;
＆LT; DIV CLASS =容器＆GT;
＆LT; DIV CLASS =导航栏头＆GT;
＆LT;一类=导航栏品牌的href =＃＆GT;项目名单| {{alertItemAdded}}＆下; / A＆GT;
＆LT; / DIV＆GT;
＆LT;窗体类=导航栏，导航栏的形式，对角色=搜索＆GT;
＆LT; DIV CLASS =表单组＆GT;
＆LT;输入类型=文本级=表格控NG模型=的newitem占位符=添加项目＆GT;
＆LT; / DIV＆GT;
＆LT;按钮式=提交级=BTN BTN-主要NG点击=的addItem（的newitem）＆gt;添加项目＆lt; /按钮＆GT;
＆LT; /表及GT;
＆LT; / DIV＆GT;
＆LT; / NAV＆GT; ＆LT; DIV CLASS =容器NG-控制器=ContentCtrl＆GT;
＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =COL-XS-12＆GT;
＆LT;窗体类=形式的内联＆GT;
＆LT; DIV CLASS =表单组＆GT;
＆LT;输入类型=文本级=表格控NG模型=的newitem占位符=添加项目＆GT;
＆LT; / DIV＆GT;
＆LT;按钮式=提交级=BTN BTN-主要NG点击=的addItem（的newitem）＆gt;添加项目＆lt; /按钮＆GT;
＆LT; /表及GT;
＆LT; BR /＆GT;
＆LT; BR /＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =COL-XS-12＆GT;
＆LT; DIV NG重复=项中的项目＆GT; ＆LT;窗体类=形式的内联＆GT;
＆LT; DIV CLASS =表单组＆GT;
＆LT; DIV＆GT; {{}项}＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT;按钮式=按钮级=BTN BTN-默认BTN-SNG点击=为removeItem（$指数）＆GT;删除项目＆lt; /按钮＆GT;
＆LT; /表及GT; ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
angular.module（'MyApp的'，[]）;angular.module（'MyApp的'）。控制器（'MainCtrl'，函数（$范围，ItemFactory）{ $ scope.text =从主控制器文本; $ scope.addItem =功能（的newitem）{
ItemFactory.addItem（的newitem）;
}}）;angular.module（'MyApp的'）。控制器（'NavCtrl'，函数（$范围）{ // $上
$范围。在$（'itemAdded'，函数（事件数据）{
$ scope.alertItemAdded =数据;
}）;}）;angular.module（'MyApp的'）。控制器（'ContentCtrl'，函数（$范围，ItemFactory）{ $ scope.items = ItemFactory.getItem（）; $ scope.removeItem =功能（$指数）{
ItemFactory.removeItem（$指数）;
}}）;angular.module（'MyApp的'）。工厂（'ItemFactory'，函数（）{ VAR项目= [
项目1，
项目2，
项目3
]; 返回{
的getItem：功能（）{
返回的物品;
}，
的addItem：函数（项目）{
items.push（项目）;
// $广播
。$ $范围广播（'itemAdded'，'添加的项目！'）;
}，
的removeItem：功能（$指数）{
items.splice（$指数，1）;
}
};}）;
解决方案
您可以注入$ rootScope到你的工厂和使用$广播从那里。
angular.module（'MyApp的'）。工厂（'ItemFactory'，[$ rootScope功能（$ rootScope）{ VAR项目= [
项目1，
项目2，
项目3
]; 返回{
的getItem：功能（）{
返回的物品;
}，
的addItem：函数（项目）{
items.push（项目）;
// $广播
。$ rootScope $广播（'itemAdded'，'添加的项目！'）;
}，
的removeItem：功能（$指数）{
items.splice（$指数，1）;
}
};
}]）;
I have a list of items and I need to get a message (saying Item added!) in the navbar whenever a new item is added.
The function addItem() (ng-click on the Add Item button) is in the ItemFactory and from there I seem to not be able to broadcast it.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-app="MyApp" ng-controller="MainCtrl">
<div>{{ text }}
<nav class="navbar navbar-inverse" ng-controller="NavCtrl">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">List of items | {{ alertItemAdded }}</a>
</div>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" ng-model="newItem" placeholder="Add an item">
</div>
<button type="submit" class="btn btn-primary" ng-click="addItem(newItem)">Add Item</button>
</form>
</div>
</nav>
<div class="container" ng-controller="ContentCtrl">
<div class="row">
<div class="col-xs-12">
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" ng-model="newItem" placeholder="Add an item">
</div>
<button type="submit" class="btn btn-primary" ng-click="addItem(newItem)">Add Item</button>
</form>
<br />
<br />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div ng-repeat="item in items">
<form class="form-inline">
<div class="form-group">
<div>{{ item }}</div>
</div>
<button type="button" class="btn btn-default btn-s" ng-click="removeItem($index)">Remove Item</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
angular.module('MyApp',[]);
angular.module('MyApp').controller('MainCtrl', function($scope, ItemFactory){
$scope.text = "Text from the Main Controller";
$scope.addItem = function(newItem){
ItemFactory.addItem(newItem);
}
});
angular.module('MyApp').controller('NavCtrl', function($scope){
// $on
$scope.$on('itemAdded', function(event, data){
$scope.alertItemAdded = data;
});
});
angular.module('MyApp').controller('ContentCtrl', function($scope, ItemFactory){
$scope.items = ItemFactory.getItem();
$scope.removeItem = function($index){
ItemFactory.removeItem($index);
}
});
angular.module('MyApp').factory('ItemFactory', function(){
var items = [
'Item 1',
'Item 2',
'Item 3'
];
return {
getItem : function() {
return items;
},
addItem : function(item){
items.push(item);
// $broadcast
$scope.$broadcast('itemAdded', 'Item added!');
},
removeItem : function($index){
items.splice($index, 1);
}
};
});
解决方案
You can inject $rootScope into your factory and use $broadcast from there.
angular.module('MyApp').factory('ItemFactory', ["$rootScope", function($rootScope){
var items = [
'Item 1',
'Item 2',
'Item 3'
];
return {
getItem : function() {
return items;
},
addItem : function(item){
items.push(item);
// $broadcast
$rootScope.$broadcast('itemAdded', 'Item added!');
},
removeItem : function($index){
items.splice($index, 1);
}
};
}]);
这篇关于角：如何从工厂$广播？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
