javascript - How to change attribute on a selected directive from a controller -

-

i build application interactive svg map angular.js this user interface

whole app controlled controller, svg wrapped in directive, , every <path> in svg partial directive too.
when user clicked on wall, <path> id memorized in custom service , next when user select color, need fill wall color. problem can't access directive within controller. cant share scope directive because have multiple nested directives in controller , want access them id.

maybe there design mistake? how can achieve workflow?

there code controller, service , directives

colorpicker controller

app.controller("colorpicker", function($scope, $timeout, appconfig, colorservice) { $scope.colors = []; $scope.currentcolorset = 0; $scope.svgtemplateurl = appconfig.arsvg[$scope.$parent.roomtype.id][$scope.$parent.roomstyle.id] + 'over.svg'; $scope.maxcolorset = math.max.apply(math, jsondata.roomtype[$scope.$parent.roomtype.id].data.roomstyle[$scope.$parent.roomstyle.id].colors.map(function(color) {     return color.color.group; })); $scope.sliderconfig = {     min: 0,     max: $scope.maxcolorset,     step: 1      }  $scope.emptycolors = ( colorservice.getcolors().length === 0 ); $scope.currentprops = {};  $scope.applycolor = function(color) {     console.log($scope.currentprops);     //**here need set fill selected color selected directive** }  $scope.prevcolorset = function(){     if($scope.currentcolorset > 0) {         $scope.currentcolorset--;         generatecolorset($scope.currentcolorset);     }  }  $scope.nextcolorset = function(){     if($scope.currentcolorset < $scope.maxcolorset) {         $scope.currentcolorset++;         generatecolorset($scope.currentcolorset);     }  }  generatecolorset = function(setindex){     $scope.colors = [];     for(var = 0; < jsondata.roomtype[$scope.$parent.roomtype.id].data.roomstyle[$scope.$parent.roomstyle.id].colors.length; i++){         if(jsondata.roomtype[$scope.$parent.roomtype.id].data.roomstyle[$scope.$parent.roomstyle.id].colors[i].color.group == setindex) {             $scope.colors.push(jsondata.roomtype[$scope.$parent.roomtype.id].data.roomstyle[$scope.$parent.roomstyle.id].colors[i].color)         }     } } generatecolorset($scope.currentcolorset);  $scope.$watch("currentcolorset", function(newvalue, oldvalue) {     generatecolorset($scope.currentcolorset); });  });

directive whole svg

app.directive('svgmap', ['$compile', function ($compile) { return {     restrict: 'a',     link: function (scope, element, attrs) {         var svg = $(element).find('svg');         svg.removeattr('xmlns:a');         svg.attr('width', '869px');         svg.attr('height', '489px');         element.append(svg);          var regions = element[0].queryselectorall('path');         angular.foreach(regions, function (path, key) {             var regionelement = angular.element(path);             regionelement.attr("region", "");             $compile(regionelement)(scope);         });     }, } }]);

directive region (wall)

app.directive('region', ['$compile','colorservice','$timeout', function ($compile, colorservice, $timeout) { return {     restrict: 'a',     link: function (scope, element, attrs) {         scope.properties = {             elementid : element.attr("id"),             stroke: '',             fill: '#fff'         };         scope.regionclick = function () {             scope.currentprops = scope.properties;             if(colorservice.selectedregion != scope.properties.elementid) {                 scope.properties.stroke = '#e5514e';                 colorservice.selectedregion = scope.properties.elementid;             } else {                 scope.properties.stroke = '';                 colorservice.selectedregion = '';              }             console.log('click: ' + scope.properties.elementid + ' : ' + scope.properties.stroke);         };         scope.setstroke = function () {             scope.stroke = '#e5514e';         };         scope.removestroke = function() {             if(colorservice.selectedregion != scope.properties.elementid) {                 scope.properties.stroke = '';             }             //console.log('enter: ' + scope.elementid + ' : ' + scope.stroke);          };         scope.removecolor = function() {             console.log('removed');             scope.properties.fill = '#fff';             colorservice.remove(scope.properties.elementid);         };         colorservice.getcolors().foreach(function(item) {             if(item.id === scope.properties.elementid) {                 scope.properties.fill = item.info.val;             }         });         element.attr("ng-click", "regionclick()");         element.attr("ng-attr-stroke", "{{properties.stroke}}");         element.attr("ng-attr-fill", "{{properties.fill}}");         element.attr("ng-mouseenter", "setstroke()");         element.attr("ng-mouseleave", "removestroke()");         element.attr("ng-right-click", "removecolor()");         element.after('<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />');         element.removeattr("region");         $compile(element)(scope);     } } }]);


Comments

Post a Comment

Popular posts from this blog

ruby - Trying to change last to "x"s to 23 -

-
i have been playing around irb , have string looks this: irb(main):072:0> puts ["[\"4354 5432 5432 xxxxx\", \"6547 6547 8543 xxxxx\", \"2344 6543 6674 xxxxx\", \"2346 6236 7543 xxxxx\", \"1273 5585 5587 xxxxx\"]"] => nil irb(main):073:0> what want gsub last 2 "x" s of each 17 digit combination, 23 . what i've tried far (i've been using rubular): a.gsub(/\d[x]/,"23") <= grabs "x" s i'm close a.gsub(/\w[x{2}]/,"23") <= grabs "x" s grabs two digits each combination. is there easier way i'm not understanding? a.gsub(/\d{4} \d{4} \d{4} xxx\kxx/, '23') \d{4} = 4 digits what \k drop matched far. can use don't replace entire number, still able validate have in desired format.
Read more

jquery - Clone last and append item to closest class -

-
this bare-bones code on page: <div class="list-container"> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> </div> <p><button class="add-list-item">add</button></p> <div class="list-container"> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> </div> <p><button class="add-list-item">add</button></p> <di...
Read more

css - Can I use the :after pseudo-element on an input field? -

-
i trying use :after css pseudo-element on input field, not work. if use span , works ok. <style type="text/css"> .mystyle:after {content:url(smiley.gif);} .mystyle {color:red;} </style> this works (puts smiley after "buu!" , before "some more") <span class="mystyle">buuu!</span>a more this not work - colors somevalue in red, there no smiley. <input class="mystyle" type="text" value="somevalue"> what doing wrong? should use pseudo-selector? note: cannot add span around input , because being generated third-party control. :after , :before not supported in internet explorer 7 , under, on elements. it's not meant used on replaced elements such form elements (inputs) , image elements . in other words it's impossible pure css. however if using jquery can use $(".mystyle").after("add smiley here"); api docs on .after to ...
Read more