javascript - Angular JS - Need to communicate with all directives on page from code in service which only runs once -
i have created basic dropdown directive works (opening , closing correctly etc).
i have tried create manager service keeps track of how many dropdowns on thae page , allowes "close others" when dropdown opened , "close all" when body of page clicked not on dropdown.
the problem want set single jquery event on document body calls "close all" event , want bound once. can tow work if set in mill method manager service, there can't phone call method of mill beingness returned.
i tried closing them portion of code wasn't returned mill because have access array there, don't have access $scope.$apply service.
any ideas how can working?
here code of removed brevity.
angular.module('directives') .factory('dropdownmanager', function() { var dropdowns = []; // close when document clicked, unless click on dropdown $('body').on('click', function (event) { // need access close function here }); homecoming { additem: function(itemscope) { // add together item array }, removeitem: function(itemscope) { // add together item array }, closeall: function(openitem){ // loop through array , close them using item.isopen = false; }, }; }]) .directive('six4dropdown', function (dropdownmanager) { // dropdown directive code goes here });
you can create custom directive reason please see demo below
class="snippet-code-js lang-js prettyprint-override">var app = angular.module('app', []); app.directive('mydirective', function(dropdownmanager) { homecoming { link: function(scope, element, attr) { element.on('click', function() { scope.$apply(function() { dropdownmanager.closeall(); }); }); } }; }); app.factory('dropdownmanager', function() { var dropdowns = [{ id: 1, isopen: true }, { id: 2, isopen: true }]; homecoming { additem: function(itemscope) { // add together item array }, removeitem: function(itemscope) { // add together item array }, closeall: function(openitem) { console.log("sa"); angular.foreach(dropdowns, function(item) { item.isopen = false; }); }, dropdowns: dropdowns }; }); app.controller('firstctrl', function($scope, dropdownmanager) { $scope.data = dropdownmanager; }); class="snippet-code-html lang-html prettyprint-override"><html ng-app="app" my-directive=""> <head> <script src="//code.jquery.com/jquery.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script> <meta charset="utf-8"> <title>js bin</title> </head> <body> <div ng-controller="firstctrl"> <pre>{{data.dropdowns | json}}</pre> </div> </body> </html>
javascript angularjs angularjs-directive
No comments:
Post a Comment