javascript - 当我从控制器更改时，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 在此处的控制器中定义：

      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需要一个表达式本身，而不是它的求值结果。文档。

<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