angular js自定义指令范围。$ watch不能按预期工作

Question

我已经将自定义指令绑定到svg组的transform属性：

自定义指令

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

SVG集团

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

控制者

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

调用doStuff之后的DOM

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

调用doStuff更改比例值，并且我可以看到DOM中的ng-scale属性发生了变化，但是实际的transform属性仅在首次运行时填充，而从未再次更新。 为什么会这样呢？

Answer 1

为了使观察者能够正常工作，请在使用指令时不要使用插值（大括号）。

SVG集团

<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 + ")");
        });
    };
});

参数attrs.xdScale是一个字符串。 当$watch的第一个参数是字符串时，watch函数将作为AngularJS表达式求值。 双花括号在Angular表达式中不起作用。

另外，请不要使用ng-scale作为指令的名称。 ng-前缀保留用于AngularJS内置指令。

要查看该指令是否有效，请在JSFiddle上访问DEMO 。