All geek questions in one place

Angularjs: How to * get * the css property from an element in a directive?

I can set the css properties for an element in the directive. But I cannot get the css properties for the element using the same method, it just returns an empty string.

ie: var test = element.css ("background-size"); // does not work!

What am I doing wrong? See my link handler in my directive below:

link: function($scope, element, attrs) { //debugger; //handler for close button: //its the first child within the parent element: $scope.closeBtn = angular.element(element.children()[0]); //save the background image so we can toggle its visibility: $scope.backgroundImg = element.css("background","url(../../a0DK0000003XvBYMA0/assets/images/tabbed_panel_bkgd.png) no-repeat") ;//className: element.css("background-position","0px 35px"); element.css("background-size", "924px 580px"); //above I was able to set css properties, but why can't I retrieve css properties like this??: var test = element.css("background-size"); $scope.closeBtn.bind('click',function(){ TweenLite.to(element, .75, {top:"635px",ease:Power2.easeOut, onComplete:function(){ $scope.opened = false; $scope.closeBtn.css('opacity',0); } }); }) //hander to raise tab panel: element.bind('click', function() { if(!$scope.opened){ //debugger; $scope.closeBtn.css('opacity',1); TweenLite.to(element, .75, {top:"150px",ease:Power2.easeOut}); $scope.opened = true; } }); }
+4
source share
2 answers

I took a step back from my question and realized if I was trying to get css properties, as usual, with jQuery, then I probably didn’t use the angular style solution. My initial problem was that I needed to save the css properties so that I would apply them later. So instead of this approach, I used the ng-class directive to switch classes, so I had nothing to store.

 <html> <body> <tabbed-Panel ng-class="btmTabPanelClass" > <div ng-show="opened" class="tabPanelCloseBtn"> </div> <tabs> <pane ng-repeat="pane in panes" heading="{{pane.title}}" active="pane.active"> <div class ="tabPanelContent" ng-include src="activeContent()"></div> </pane> </tabs> </tabbed-Panel> </div </body> </html> angular.module('directives', ['baseModule','ui.bootstrap']) .directive('tabbedPanel',['$animator',function($animator) { //debugger; return { //scope:{}, restrict:"E", //add controller to here controller:function($scope){ //debugger; $scope.bTabClicked = 0; $scope.curTabIdx = 0; $scope.opened = false; $scope.closeBtn = null; $scope.arClasses = ["bottomTabPanel", " bp_off"]; $scope.btmTabPanelClass = $scope.arClasses[0] + $scope.arClasses[1] ; //get the tabs from the flows.json so we can create a model for the tab panel! $scope.panes = $scope.flows[$scope.getCurFlowIdx()].array_data[$scope.getCurPageIdx()].tab_data; //first tab is active by default: //$scope.panes[0].active = true; //set the content for the current tab: $scope.activeContent = function() { for (var i=0;i<$scope.panes.length;i++) { if ($scope.panes[i].active) { $scope.curTabIdx = i; return $scope.panes[i].content; } } }; //tab click watcher (to make sure user clicks on tab and not tab container): $scope.$watch('activeContent()', function(paneIndex) { ++$scope.bTabClicked; }); //-------------------------------------------------- }, link: function($scope, element, attrs) { //debugger; //handler for close button: //its the first child within the parent element: $scope.closeBtn = angular.element(element.children()[0]); $scope.closeBtn.bind('click',function(){ // set all tabs to inactive: $scope.bTabClicked = 0; for (var i=0;i<$scope.panes.length;i++) $scope.panes[i].active = false; TweenLite.to(element, .75, {top:"635px",ease:Power2.easeOut, onComplete:function(){ $scope.opened = false; $scope.btmTabPanelClass = $scope.arClasses[0] + $scope.arClasses[1] ; $scope.$apply(); //force binding to update $scope.bTabClicked = 0; } }); }) /*hander to raise tab panel:*/ element.bind('click', function() { if(!$scope.opened && $scope.bTabClicked){ //debugger; TweenLite.to(element, .75, {top:"150px",ease:Power2.easeOut}); $scope.opened = true; $scope.btmTabPanelClass = $scope.arClasses[0] ; $scope.$apply(); //force binding to update } else $scope.bTabClicked = 0; }); } }; }]);
+1
source

You can access the CSS style of an Angular element in a directory link function

 var style = window.getComputedStyle(element[0]),

And then access the value of any CSS rule, for example:

 var color = style.getPropertyValue('color');
0
source

Source: https://habr.com/ru/post/1484687/

More articles:


All Articles