Angular.js正在更新指令中的SVG模板

Angular.js updating SVG templates in directives

本文关键字：SVG 模板指令更新 js Angular 更新时间：2024-07-01

不久前，我问过"Angular.js在指令中渲染SVG模板"，在这里我用SVG节点替换了Angular在渲染模板时生成的DOM节点。我得到了一个回答，但我意识到我丢失了angular的所有数据绑定。

请参阅Plunkr（单击更新）：http://plnkr.co/edit/HjOpqc?p=preview

如何用SVG节点替换这些DOM节点，并保持角度绑定不变？我试着使用$compile来使它工作（就像我对普通html所做的那样），但它就是不起作用。

代码：

var svgNS = 'http://www.w3.org/2000/svg';
app.directive('path', ngSvg('path'));
app.directive('g', ngSvg('g'));
function ngSvg(type) {
  return function($timeout, $compile) {
    return {
      restrict: 'E',
      link: function(scope, el, attr) {
        //skip nodes if they are already svg
        if (el[0].namespaceURI === svgNS) {
          return;
        }
        // I would expect the chunk of code below to work,
        // but it does not with ng-repeat
        // var newAttr = {};
        // _.each(el[0].attributes, function(at) {
        //   newAttr[at.nodeName] = at.value;
        // });
        // var path = makeNode(type, el, newAttr);
        // var parent = path.cloneNode(true);
        // $compile(parent)(scope);
        // var children = el.children();
        // $(parent).append(children);
        // $timeout(function() {
        //   el.replaceWith(parent);
        // })

        // this works for rendering, but does not update the svg elements
        // when update is clicked
        $timeout(function() {
          var newAttr = {};
          _.each(el[0].attributes, function(at) {
            newAttr[at.nodeName] = at.value;
          });
          var path = makeNode(type, el, newAttr);
          var parent = path.cloneNode(true);

          var children = el.children();
          $(parent).append(children);
          el.replaceWith(parent);
        });
      }
    }
  }
}
/* Create a shape node with the given settings. */
function makeNode(name, element, settings) {
  // var ns = 'http://www.w3.org/2000/svg';
  var node = document.createElementNS(svgNS, name);
  for (var attribute in settings) {
    var value = settings[attribute];
    if (value !== null && value !== null && !attribute.match(/'$/) &&
      (typeof value !== 'string' || value !== '')) {
      node.setAttribute(attribute, value);
    }
  }
  return node;
}

这个问题在Angular 1.3中得到了解决，这里是一些自定义svg指令的实现，具有Angular指令所期望的行为。现在对指令声明有一个特殊要求，如下templateNamespace: 'svg'

还要注意，我正在覆盖一些保留的属性，例如，关于<rect/>的x和height。为了保持对这些的更多控制，您可以利用ng-attr作为'<rect ng-attr-width="{{ ngWidth }}" />

JSFiddle链接

这是一个自定义的<rect/>和<circle/>

app.directive('ngRect', [function () {
    return {
        templateNamespace: 'svg',
        replace: true,
        template: '<rect ng-attr-width="{{ ngWidth }}" ng-attr-height="{{ ngHeight }}" ng-attr-x="{{ ngX }}" ng-attr-y="{{ ngY }}" ng-click="ngRectClick()"/>',
        scope: {
            'ngHeight': '=',
            'ngWidth': '='
        },
        link: function (scope, elem, attrs) {
            scope.ngRectClick = function() {
                console.log(elem);
            }
        }
    }
}]);
app.directive('ngCircle', [function () {
    return {
        templateNamespace: 'svg',
        replace: true,
        template: '<circle ng-attr-cx="{{ ngCx }}" ng-attr-cy="{{ ngCy }}" ng-attr-r="{{ ngR }}" ng-attr-fill="{{ ngFill }}" ng-click="ngCircleClick()"/>',
        scope: {
            'ngCx': '=',
            'ngCy': '=',
            'ngR': '=',
            'ngFill': '='
        },
        link: function (scope, elem, attrs) {
            scope.ngCircleClick = function() {
                console.log(elem);
            }
        }
    }
}]);