angularjs - How can I make a variable in custom directives which can be access in controller file or in any other javascript file of the same app? -
i want declare variable in custom directives can access in same app.
my requirement declare variable in custom directive , value access me.
i want declare variable in below directive
.directive('nglistselect', ['$filter', function($filter) { return { restrict: 'e', replace: true, scope: { selectedlistitems: "=selectedlist", availablelistitems: "=availablelist", key: "@key", buttonstyle: "@buttonstyle", panelstyle: "@panelstyle", height: "@height", width: "@width", availablelabel: "@availablelabel", selectedlabel: "@selectedlabel" }, templateurl: 'nglistselect.html', compile: function(telem, tattrs) { return { pre: function(scope, ielem, iattrs) { scope.availabletext = angular.isundefined(scope.availablelabel) ? 'available' : scope.availablelabel; scope.selectedtext = angular.isundefined(scope.selectedlabel) ? 'selected' : scope.selectedlabel; scope.height = angular.isundefined(scope.height) ? '144px' : scope.height; scope.width = angular.isundefined(scope.width) ? '640px' : scope.width; scope.buttonstyle = angular.isundefined(scope.buttonstyle) ? 'alpha' : scope.buttonstyle; scope.buttonclass = getcolor(scope.buttonstyle, 'button'); scope.panelstyle = angular.isundefined(scope.panelstyle) ? 'alpha' : scope.panelstyle; scope.panelclass = getcolor(scope.panelstyle, 'panel'); scope.leftmouseselecteditems = []; scope.rightmouseselecteditems = []; scope.dropdownstyle = { height: scope.height }; scope.containerstyle = { width: scope.width }; scope.ascendingorderflag = true; scope.topletter = 'a'; scope.bottomletter = 'z'; scope.letterstyle = { maincontainer:{"width":"10px","line-height":"9px"}, letter:{"font-size":"10px","float":"left","font-weight":"600","font-family":"sans-serif"}, lettercrimson:{"font-size":"10px","float":"left","font-weight":"600","font-family":"sans-serif", "color":"crimson"}, letterdarkblue:{"font-size":"10px","float":"left","font-weight":"600","font-family":"sans-serif", "color":"darkblue"}, arrow:{"font-size":"25px"} }; if (scope.availablelistitems[0] instanceof object) { scope.leftselectngoption = "item item." + scope.key + " item in availablelistitems | orderby:'" + scope.key + "'"; scope.rightselectngoption = "item item." + scope.key + " item in selectedlistitems"; scope.availablelistitems = getunique(scope.availablelistitems, scope.key); } else { scope.leftselectngoption = "item item item in availablelistitems | orderby:'tostring()'"; scope.rightselectngoption = "item item item in selectedlistitems"; scope.availablelistitems = getunique(scope.availablelistitems); } function getcolor(colorclass, type) { var data = {}, color = {}; switch (colorclass) { case 'pearl': type === 'button' ? (data['btn-default'] = true) : (data['panel-default'] = true); break; case 'blue': type === 'button' ? (data['btn-primary'] = true) : (data['panel-primary'] = true); break; case 'alpha': color = {}; color['background-color'] = 'hsl(193, 32%, 49%) !important';color['background-repeat'] = 'repeat-x';color['filter'] = 'progid:dximagetransform.microsoft.gradient(startcolorstr="#b8d3da", endcolorstr="#5493a4")';color['background-image'] = '-khtml-gradient(linear, left top, left bottom, from(#b8d3da), to(#5493a4))';color['background-image'] = '-moz-linear-gradient(top, #b8d3da, #5493a4)';color['background-image'] = '-ms-linear-gradient(top, #b8d3da, #5493a4)';color['background-image'] = '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #b8d3da), color-stop(100%, #5493a4))';color['background-image'] = '-webkit-linear-gradient(top, #b8d3da, #5493a4)';color['background-image'] = '-o-linear-gradient(top, #b8d3da, #5493a4)';color['background-image'] = 'linear-gradient(#b8d3da, #5493a4)';color['border-color'] = '#5493a4 #5493a4 hsl(193, 32%, 41.5%)';color['color'] = '#333 !important';color['text-shadow'] = '0 1px 1px rgba(255, 255, 255, 0.49)';color['-webkit-font-smoothing'] = 'antialiased'; type === 'button' ? (scope.buttoncssstyle = color) : (scope.panelcssstyle = color); break; case 'sand': color = {}; color['background-color'] = 'hsl(33, 32%, 49%) !important';color['background-repeat'] = 'repeat-x';color['filter'] = 'progid:dximagetransform.microsoft.gradient(startcolorstr="#dacbb8", endcolorstr="#a48054")';color['background-image'] = '-khtml-gradient(linear, left top, left bottom, from(#dacbb8), to(#a48054))';color['background-image'] = '-moz-linear-gradient(top, #dacbb8, #a48054)';color['background-image'] = '-ms-linear-gradient(top, #dacbb8, #a48054)';color['background-image'] = '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #dacbb8), color-stop(100%, #a48054))';color['background-image'] = '-webkit-linear-gradient(top, #dacbb8, #a48054)';color['background-image'] = '-o-linear-gradient(top, #dacbb8, #a48054)';color['background-image'] = 'linear-gradient(#dacbb8, #a48054)';color['border-color'] = '#a48054 #a48054 hsl(33, 32%, 41.5%)';color['color'] = '#333 !important';color['text-shadow'] = '0 1px 1px rgba(255, 255, 255, 0.49)';color['-webkit-font-smoothing'] = 'antialiased'; type === 'button' ? (scope.buttoncssstyle = color) : (scope.panelcssstyle = color); break; case 'olive': color = {}; color['background-color'] = 'hsl(89, 32%, 49%) !important';color['background-repeat'] = 'repeat-x';color['filter'] = 'progid:dximagetransform.microsoft.gradient(startcolorstr="#cadab8", endcolorstr="#7ea454")';color['background-image'] = '-khtml-gradient(linear, left top, left bottom, from(#cadab8), to(#7ea454))';color['background-image'] = '-moz-linear-gradient(top, #cadab8, #7ea454)';color['background-image'] = '-ms-linear-gradient(top, #cadab8, #7ea454)';color['background-image'] = '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #cadab8), color-stop(100%, #7ea454))';color['background-image'] = '-webkit-linear-gradient(top, #cadab8, #7ea454)';color['background-image'] = '-o-linear-gradient(top, #cadab8, #7ea454)';color['background-image'] = 'linear-gradient(#cadab8, #7ea454)';color['border-color'] = '#7ea454 #7ea454 hsl(89, 32%, 41.5%)';color['color'] = '#333 !important';color['text-shadow'] = '0 1px 1px rgba(255, 255, 255, 0.49)';color['-webkit-font-smoothing'] = 'antialiased'; type === 'button' ? (scope.buttoncssstyle = color) : (scope.panelcssstyle = color); break; default: data[colorclass] = true; } return data; } function getunique(array, key) { if (array[0] instanceof object) { var object = {}; (var = 0; < array.length; i++){ object[array[i][key]] = array[i]; } array = []; (var objkey in object) { array.push(object[objkey]); } return array; } else { return array.sort().filter(function(item, pos, ary) { return !pos || item != ary[pos - 1]; }); } } function orderselections() { if (scope.selectedlistitems[0] instanceof object) { scope.selectedlistitems = $filter('orderby')(scope.selectedlistitems, scope.key); } else { scope.selectedlistitems = $filter('orderby')(scope.selectedlistitems, 'tostring()'); } } scope.setascendingdescendingorder = function() { if(scope.ascendingorderflag) { scope.topletter = 'z'; scope.bottomletter = 'a'; scope.ascendingorderflag = false; if (scope.selectedlistitems[0] instanceof object) { scope.selectedlistitems = setordering(scope.key, true); } else { scope.selectedlistitems = setordering('tostring()', true); } } else { scope.topletter = 'a'; scope.bottomletter = 'z'; scope.ascendingorderflag = true; if (scope.selectedlistitems[0] instanceof object) { scope.selectedlistitems = setordering(scope.key, false); } else { scope.selectedlistitems = setordering('tostring()', false); } } }; function setordering(ordervariable, reverse) { return $filter('orderby')(scope.selectedlistitems, ordervariable, reverse); } scope.additemstoright = function() { angular.foreach(scope.leftmouseselecteditems, function(leftmouseselecteditem, key) { scope.selectedlistitems.push(leftmouseselecteditem); angular.foreach(scope.availablelistitems, function(availablelistitem, index) { if (scope.availablelistitems[0] instanceof object) { if (availablelistitem[scope.key] === leftmouseselecteditem[scope.key]) { scope.availablelistitems.splice(index, 1); } } else { if (availablelistitem === leftmouseselecteditem) { scope.availablelistitems.splice(index, 1); } } }); }); scope.leftmouseselecteditems = []; orderselections(); setselectedoptiondisabledenabled(); }; scope.addallitemstoright = function() { angular.foreach(scope.availablelistitems, function(availablelistitem, key) { scope.selectedlistitems.push(availablelistitem); }); scope.availablelistitems = []; scope.leftmouseselecteditems = []; orderselections(); setselectedoptiondisabledenabled(); }; scope.additemstoleft = function() { angular.foreach(scope.rightmouseselecteditems, function(rightmouseselecteditem, key) { scope.availablelistitems.push(rightmouseselecteditem); angular.foreach(scope.selectedlistitems, function(selectedlistitem, index) { if (scope.availablelistitems[0] instanceof object) { if (selectedlistitem[scope.key] === rightmouseselecteditem[scope.key]) { scope.selectedlistitems.splice(index, 1); } } else { if (selectedlistitem === rightmouseselecteditem) { scope.selectedlistitems.splice(index, 1); } } }); }); scope.rightmouseselecteditems = []; setselectedoptiondisabledenabled(); }; scope.addallitemstoleft = function() { angular.foreach(scope.selectedlistitems, function(selectedlistitem, key) { scope.availablelistitems.push(selectedlistitem); }); scope.selectedlistitems = []; scope.rightmouseselecteditems = []; setselectedoptiondisabledenabled(); }; function setselectedoptiondisabledenabled() { scope.isselectedoptiondisabled = scope.selectedlistitems.length<=0; } scope.additemstotop = function() { var previndex = -1; angular.foreach(scope.rightmouseselecteditems, function(rightmouseselecteditem, key) { var itemindex = scope.selectedlistitems.indexof(rightmouseselecteditem); if (itemindex - 1 === previndex) { previndex = itemindex; } else if (itemindex > 0) { var itemtomove = scope.selectedlistitems.splice(itemindex, 1); scope.selectedlistitems.splice(itemindex - 1, 0, itemtomove[0]); } }); }; scope.additemstodown = function() { var previndex = scope.selectedlistitems.length; angular.foreach(scope.rightmouseselecteditems.concat().reverse(), function(rightmouseselecteditem, key) { var itemindex = scope.selectedlistitems.indexof(rightmouseselecteditem); if (itemindex + 1 === previndex) { previndex = itemindex; } else if (itemindex < scope.selectedlistitems.length - 1) { var itemtomove = scope.selectedlistitems.splice(itemindex, 1); scope.selectedlistitems.splice(itemindex + 1, 0, itemtomove[0]); } }); }; setselectedoptiondisabledenabled(); } }; } }; } ]); })(window, window.angular); <div><button type='button' class='btn btn-success btn-xs' ng-click='editpermissionfx(selectedlist)'><span class='fa > fa-check'></span>save</button>" + "<button type='button' class='btn btn-link btn-xs' ng-click='editpermissioncancelfx()'>cancel</button>" + "</div>"
as declared in directive unable editpermissionfx(selectedlist) selectedlist in controller file.
and controller file is:
angular.module('mainapp1',['nglistselect']).controller('myctrl1',function($scope,$http){ $scope.editpermission=false; $scope.grp=false; $scope.showgrp=[]; $scope.availablelist= [ {name: "john", email: "john@gmail.com"}, {name: "avinash", email: "avinash@gmail.com"}, {name:"priya", email: "priya@gmail.com"}]; }); $scope.selectedlist = []; });
if looking global variable, appropriate way service or factory. factory:
angular.module("mymodule").factory("globalsettings", function () { return { variable1: "value" } }); this give inject-able container global variable. can set in directive , read in controller. controller:
angular.module("mymodule").controller("somecontroller", function (globalsettings) { if (globalsettings.variable1 == "somevalue") { // whatever } }); and directive
angular.module("mymodule").directive("somedirective", function (globalsettings) { return { link: function (scope, element, attrs) { // whatever globalsettings.variable1 = "appropriatevalue"; // whatever } } }); this recommended way share data among controllers , directives.
Comments
Post a Comment