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

我有一个svg“path”元素，它具有生成的data-ng-attr-d属性。生成的属性值如下所示：

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);
                }
            }
        });
    }
...
};
}]);

data-ng-attr-d:M{p[0].x}，{p[0].y}L{（p.x-p[0].x）}，{（p.y-p[0].y）}L{（p.x-p.x）}，{（p.y-p.y）}

d:M300100L50,0L150150

我在看电视节目。在点数组中添加和删除点时，我将重新生成路径的data-ng-attr-d属性，如下所示：

data-ng-attr-d:M{p[0].x}，{p[0].y}L{（p.x-p[0].x}，{（p.y-p[0].y}L{（p.x-p.x）}，{（p.y-p.y）}L d:M300100L50,0L150150L-400，-150

一切看起来还不错。但当我移动形状时，属性如下所示：

data-ng-attr-d:M{p[0].x}，{p[0].y}L{（p.x-p[0].x}，{（p.y-p[0].y}L{（p.x-p.x）}，{（p.y-p.y）}L d:M300100L50,0L150150（我在几秒钟前添加的最后一点已经消失）

我有这样的指示：

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);
                }
            }
        });
    }
...
};
}]);

dh.directive（'myShape'，['$compile'，'SHAPES'，'shapeService'，function（$compile，SHAPES，shapeService）{
返回{
...,
限制：'E'，
范围：{
形状：“=”，
generateShape:“=”，
形状索引：“@”
},
链接：函数（范围、元素、属性）{
scope.shape.index=scope.shapeIndex；
var elem=scope.generateShape（scope.shape）；//返回svg**path**元素。
element.replaceWith（$compile（elem）（scope））；//用返回的**路径**元素替换****元素
//此功能是监视点
作用域：$watch（'shape.properties.points.length'，函数（）{
if（shapeService.regenate[scope.shape.name]）{
var d=shapeService.regenate[scope.shape.name]（scope.shape）；
如果（scope.shape.name==“polygon”| | scope.shape.name==“polyLine”）{
元素setAttribute（'data-ng-attr-d'，d）；
$compile（elem）（范围）；
}
}
});
}
...
};
}]);

---

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

我想您可能需要发布您的ShapeService ShapeService只是用来获取“data-ng-attr-d”的新值