angularjs之Angular : How to $broadcast from Factory_编程设计

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

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

}]);