Dynamic style - Angular

Question

Basivally i have a div ,which i'm putting a dynamic style

<div style="position:relative; left: {{et.getNumPadStyle()}}px">

My function getNumPadStyle will have

function getNumPadStyle {
    var num = "25";
    return num;
}

This is giving me an error

Referencing DOM nodes in Angular expressions is disallowed! Expression: et.getNumPadStyle()

And when i inspect the element, the exact number is not reflecting

element {
    position:relative;
    left:{{et.getNumPadStyle()}}px
}

How to resolve this?

AKMorris · Accepted Answer · 2017-06-08 05:33:46Z

3

Your angular function has to be in scope and called with $scope.getNumPadStyle()

    $scope.getNumPadStyle = function ()
    {
        var num = "25";
        return num;
    }

See it working here: https://jsfiddle.net/AKMorris/nq19be7h/

answered Jun 8, 2017 at 5:33

AKMorris

4224 silver badges16 bronze badges

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

Comments

selvakumar · Accepted Answer · 2017-06-08 05:43:35Z

2

There are few errors in your code . Find the code example below

Html :

<div ng-app>
  <div ng-controller="TodoCtrl">
  <div style="position:relative; left: {{getNumPadStyle()}}px">test</div>
</div>

JS :

function TodoCtrl($scope) {
    $scope.getNumPadStyle= function() {
    var num = "455";
    return num;
}
  };

answered Jun 8, 2017 at 5:43

selvakumar

6547 silver badges16 bronze badges

2 Comments

Matarishvan Over a year ago

I am able to get the number in my view.. The problem is binding.. not the scope for sure

AKMorris Over a year ago

I think the issue is scope for example why do you use 'et' in {{et.getNumPadStyle()}} ? As you can see above @selvassn does not use 'et'...

AKMorris · Accepted Answer · 2017-06-08 05:44:33Z

1

Try with ng-style like this:

<div ng-style="et.getNumPadStyle()">

And in Angular code:

    $scope.et = {};
    $scope.et.getNumPadStyle = {
        "padding-left" : "25px"
    }

edited Jun 8, 2017 at 5:44

AKMorris

4224 silver badges16 bronze badges

answered Jun 8, 2017 at 5:24

Jahongir Rahmonov

13.8k11 gold badges53 silver badges100 bronze badges

Collectives™ on Stack Overflow

Dynamic style - Angular

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related