Javascript angular js自定义指令作用域。$watch未按预期工作

我已将自定义指令绑定到我的

svg

组的

transform

属性：

自定义指令 SVG组 doStuff调用后的DOM

。。。

---

调用

doStuff

会更改比例值，我可以在DOM中看到

ng scale

属性的更改，但是实际的

transform

属性仅在第一次运行时填充，不会再次更新。为什么会这样？

为了让观察者工作，在使用指令时不要使用插值（双花括号）

SVG组 参数

attrs.xdScale

是一个字符串。当

$watch

的第一个参数是字符串时，watch函数将作为AngularJS表达式进行计算。双花括号在角度表达式中不起作用

另外，请不要使用

ng scale

作为指令名称。

ng-

前缀是为AngularJS内置指令保留的

要查看指令是否正常工作，请访问。

为什么不直接使用？

app.directive('ngScale', function () {
    return function (scope, element, attrs) {
        scope.$watch(attrs.ngScale, function (value) {
            element.attr('transform', "scale(" + value + ")");
        }, true);
    };
});

<g ng-scale="{{vm.scale}}">...</g>

vm.doStuff = function () {
    ...
    vm.scale *= 1.1;
}

<g ng-scale="1.1" transform="scale(1)">...</g>

<g xd-scale="vm.scale">...</g>

angular.module('myApp').directive('xdScale', function () {
    return function linkFn (scope, elem, attrs) {
        scope.$watch(attrs.xdScale, function (value) {
            console.log("Watch fired ", value);
            elem.attr('transform', "scale(" + value + ")");
        });
    };
});