Question

我必须创建一个带有svg元素的html页面，这些元素将从json文件加载。 json文件使用$ http加载并返回一个promise。

在html文件中，我有以下标记：

<ext-svg content="svg"></ext-svg>

svg将首先包含undefined，并在json加载有效的svg内容时。

我的指令定义为：

 angular.module('myApp.directives')
      .directive('extSvg', function () {
        "use strict";

        return {
          restrict: 'E',
          scope: {
            content: '='
          },
          link: function (scope, element) {
            scope.$watch('content', function (value) {
              if  (value) {
                element.replaceWith('<svg>' + scope.content + '</svg>');
              }
            });
          }
        };
      });

呈现的页面包含例如：

<svg><circle cx="10" cy="10" r="10" fill="yellow" stroke="black" stroke-width="1"></circle></svg>

它有效，但这是实现这个的正确方法吗？

Answer 1

使用ngSanitize模块可能是一个不同的方法并直接绑定控制器中的值，这样你就不需要一个指令就可以在任何需要插入SVG的地方使用ng-bind-html而不需要替换元素Look at this fiddle

所以在你的HTML

中

<div ng-bind-html="svg"></div>

并在您的控制器中

$scope.svg = $sce.trustAsHtml('<svg><circle r="50"/></svg>'); //$sce needs to be injected in your controller

AngularJS：这是编写处理模型/内容更新的指令的正确方法吗？

1 个答案: