javascript - 当我从 Controller 更改它时，Angular ng-style 不会自动应用更改

Question

我有一些使用 ng-style 的内容，这里是模板 html 的一部分:

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

breddeCSS 在 Controller 中定义:

      function setBreddeCSS(b) {

          switch (b) {

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

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

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

      }

模板获取边距样式，但仅限于首次加载网站时。如果我更改 $scope.bredde，只有在刷新页面时我才能看到更改!

我希望每次更新 $scope.bredde 时页面都动态变化。我该怎么做？

Answer 1

ngStyle 需要一个表达式本身而不是其评估的结果。 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