How to change css property by angularjs, DOM nodes is disallowed error

Question

I am trying to change the css property by angularjs when hovering

Here is my code:

$scope.showButtonGroup = () ->
        buttonTools = document.getElementsByClassName('widget-formwidget-topright-actions')
        angular.element(buttonTools).css('display': 'block')

But the console shows me the error that: Referencing DOM nodes in Angular expressions is disallowed! Expression:

Could someone help me on that? thanks!

Check this. What AngularJS means is to avoid the returning of DOM. Thus return undefined or null in your CoffeeScript. — okm
– okm, Commented Apr 10, 2014 at 23:53

doodeec · Accepted Answer · 2014-03-25 12:45:43Z

1

you can take advantage of ngStyle directive, where you assign scope variable to change element's style

controller

$scope.changeDisplay = function(value) {
    $scope.displayProperty = value;
}

markup

<div ng-style="{display: displayProperty}" ng-mouseenter="changeDisplay('block')" ng-mouseleave="changeDisplay('none')"></div>

edited Mar 25, 2014 at 12:45

answered Mar 25, 2014 at 12:38

doodeec

2,92722 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

doodeec Over a year ago

not a problem, angular has directives also for hovering - ngMouseenter and ngMouseleave where you can define which function it should trigger and in that function change the style

Justin Over a year ago

yes, I know, what I am trying to say is, the function (showButtonGroup) is a hovering function, for showing button group when hovering, so why should I use ng-style?

doodeec Over a year ago

check the edited answer... ngStyle is the correct way of manipulating css styles via angular, that's why you should use it

Collectives™ on Stack Overflow

How to change css property by angularjs, DOM nodes is disallowed error

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related