在指令中动态更改data-ng-attr-X值的最佳方法是什么？

Question

  

我有svg ＆＃39;路径＆＃39; 元素，其中包含已生成的 data-ng-attr-d 属性。生成的属性值如下：

     

data-ng-attr-d ： M {{p [0] .x}}，{{p [0] .y}} L {{（p 1。xp [0] .x）}}，{{（p 1。yp [0] .y）}} L {{（p 2。xp 1。x）}}，{{（p 2。yp 1。y）}}

     

d ： M 300,100 L 50,0 L 150,150
  

我在指令中观察点数。当从点数组添加和删除点时，我重新生成路径的 data-ng-attr-d 属性，如下所示：

  

data-ng-attr-d ： M {{p [0] .x}}，{{p [0] .y}} L {{（p 1。xp [0] .x）}}，{{（p 1。yp [0] .y）}} L {{（p 2。xp 1。x）}}，{{（p 2。yp 1。y）}} L < /strong> {{{{{{{{{{}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}

     

d ： M 300,100 L 50,0 L 150,150 L - 400，-150
  3

一切看起来都很好。但是当我移动形状时，属性如下所示：

  

data-ng-attr-d ： M {{p [0] .x}}，{{p [0] .y}} L {{（p 2。xp [0] .x）}}，{{（p 3。yp [0] .y）}} L {{（p 2。xp 。x）}}，{{（p 1。yp 1。y）}} L < /strong> {{{{{{{{{{}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}

     

d ： M 300,100 L 50,0 L 150,150（最后一点 - 我添加了一小部分SECONDS AGO-GONE）
  2

我有这样的指示：

dh.directive('myShape', ['$compile', 'SHAPES', 'shapeService', function ($compile, SHAPES, shapeService) {
return {
    ...,
    restrict: 'E',
    scope: {
        shape: '=',
        generateShape: '=',
        shapeIndex: '@'
    },
    link: function (scope, element, attrs) {
        scope.shape.index = scope.shapeIndex;
        var elem = scope.generateShape(scope.shape); // returns svg **path** element.
        element.replaceWith($compile(elem)(scope)); // replace **<my-shape>** element with returned **path** element

        //this function is watching points
        scope.$watch('shape.properties.points.length', function () {
            if (shapeService.regenerate[scope.shape.name]) {
                var d = shapeService.regenerate[scope.shape.name](scope.shape);
                if (scope.shape.name == 'polygon' || scope.shape.name == 'polyLine') {
                    elem.setAttribute('data-ng-attr-d', d);
                    $compile(elem)(scope);
                }
            }
        });
    }
...
};
}]);

我不知道为什么会这样。任何帮助，将不胜感激。谢谢。