CODEWITHSUNDEEP
javascripthtmlcssangularjsng-style
ganjan
ganjan

Reputation: 7576

Angular ng-style does not automatically apply changes when I change it from controller

I have some content where I use ng-style, here is part of the template html: 

<div ui-tree-handle data-nodrag 
     class="tree-node tree-node-content" 
     ng-click="toggle(this)" 
     ng-style={{breddeCSS}}>

the breddeCSS is defined in the controller here: 

      function setBreddeCSS(b) {

          switch (b) {

              case 0:
                  $scope.breddeCSS = {
                      "margin": "-1px",
                  };
                  break;

              case 1:
                  $scope.breddeCSS = {
                      "margin": "5px",
                  };
                  break;

              default:
                  $scope.breddeCSS = {
                      "margin": "10px",
                  };
          }

      }

The template gets the margin style, but only when the site is first loaded. If I change the $scope.bredde, it is only when the page is refreshed that I see the change!

I would like the page to change dynamically everytime $scope.bredde is updated. How can I do this?

Upvotes: 1

Views: 409

Answers (1)

Yury Tarabanko
Yury Tarabanko

Reputation: 45121

ngStyle requires an expression itself not the resulf of its evaluation. Docs.

<div ui-tree-handle data-nodrag 
     class="tree-node tree-node-content" 
     ng-click="toggle(this)" 
     ng-style="breddeCSS">

http://plnkr.co/edit/RxTte5njdS8GfTiD73LA?p=preview

Upvotes: 1

Related Questions