javascript - 如何根据变量动态更新 ng-style？

Question

我想通过更新变量将数组 (item.x, item.y) 中的x，yng-style的值传递给父元素的值transformX，transformY（更新是通过ng-click指令实现的）。

-html-

<section ng-style="{'transform' : translate(transformX,transformY)}">
  <figure ng-repeat="item in items" 
          style="left: {{item.x}}px; top: {{item.y}}px;"
          ng-click="$parent.transformX = item.x * -1; 
                    $parent.transformY = item.y * -1;">
    {{item.title}}
  </figure>
</section>

-控制器-

$scope.transformX = 0;
$scope.transformY = 0;

$scope.items = [

  { title: "foo",
    x: 50,
    y: -20
  }

  ,{ title: "bar",
    x: -40,
    y: 10
  }
];

这是我无法实现的 - 我希望父元素的 ( section) 样式属性随着figure对子元素的点击而更新，以便被点击的项目居中（因此item.y * -1）。变量会更新，样式不会。

普朗克

有什么方法可以使指令内部transformX的transformY变量ng-style真正起作用并动态更新？这个ng-style="{'transform' : translate(transformX,transformY)}"不行。。

Answer 1

按照你的方式，它会以最后一个 item.x 和 item.y 变量结束。所以如果这是你的目标，你可以这样做

    transformX = items[items.length - 1].x 

和

    transformY = items[items.length - 1].y 

这是因为 html 中只有一个 section 元素。如果您希望转换变量具有每个 x 和 y 变量，则需要将 ng-repeat 放在 section 标签中的一个级别。