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

Question

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

自定义指令

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

SVG Group

<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 Group

<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内置指令。

要查看该指令的有效性，请访问DEMO on JSFiddle。