пользовательская директива angular js. $ watch не работает должным образом

Question

пользовательская директива angular js. $ watch не работает должным образом

0

Я создал настраиваемую привязку к атрибуту transform моей группы svg:

Пользовательская директива

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;
}

DOM после звонка на doStuff

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

При вызове doStuff изменяется значение шкалы, и я вижу изменение атрибута ng-scale в DOM, однако фактический атрибут transform заполняется только при первом запуске и никогда не обновляется снова. Почему это так?

sprocket12 31 март 2016, в 17:51

Источник

0

Почему бы просто не использовать префикс ng-attr ?
Amy Blankenship 31 март 2016, в 15:35

Теги:

javascript

angularjs

svg

data-binding

angularjs-directive

1 ответ

Ещё вопросы

Почему бы просто не использовать префикс ng-attr ?

georgeawg · Answer 1 · 2016-03-31T16-50-00.000Z

Чтобы заставить наблюдателя работать, не используйте интерполяцию (двойные фигурные скобки) при использовании этой директивы.

Группа 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. Двойные фигурные скобки не работают в угловых выражениях.

Также, пожалуйста, не используйте ng-scale в качестве названия директивы. ng- зарезервирован для встроенных в AngularJS директив.

Чтобы увидеть, как работает директива, посетите ДЕМО на JSFiddle.