【问题标题】：angular js custom directive scope.$watch not working as expected角度 js 自定义指令范围。$watch 未按预期工作
【发布时间】：2016-07-20 03:33:27
【问题描述】：

我已将自定义指令绑定到我的 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 属性仅在第一次运行时填充，并且不再更新。为什么会这样？

【问题讨论】：

为什么不直接使用ng-attr prefix？

标签： javascript angularjs svg data-binding angularjs-directive

【解决方案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 内置指令保留的。

要查看该指令的工作情况，请访问DEMO on JSFiddle。

【讨论】：