gpt4 book ai didi

angularjs - Angular : How to $broadcast from Factory?

转载 作者:行者123 更新时间:2023-12-03 06:46:36 25 4
gpt4 key购买 nike

我有一个项目列表,每当添加新项目时,我需要在导航栏中收到一条消息(显示项目已添加!)。

函数 addItem()( ng-click “添加项目”按钮)位于 ItemFactory 中,从那里我似乎无法广播它。

<!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);
}
};

});

最佳答案

您可以将 $rootScope 注入(inject)您的工厂并从那里使用 $broadcast。

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);
}
};

}]);

关于angularjs - Angular : How to $broadcast from Factory?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30352627/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com