Question

我有一个包含两个不同区域的网页。

在第一个区域中，当用户点击此节点时，我会绘制一个力图（ my-graph（data =＆＃34; datagr＆＃34;））图表我尝试更新第二个区域（ {{datagr.info}} ）。

控制器：

$scope.datagr = {nodes:nodes,links:links,info:"no info"};

HTML：

.row
  .col-xs-12
    {{datagr.info}}

...some code...

.col-sm-12.col-md-10
  my-graph(data="datagr")

指令：

angular.module("appDirectives", []).directive("myGraph", function() {
  return {
    restrict: 'E',
    scope: {
      data: '='
    },
    link: function (scope, element, attrs) {
      //values from controller
      var links = scope.data.links;
      var nodes = scope.data.nodes;

      ...some code...

      //add nodes
      var node = svg.selectAll(".node")
        .data(force.nodes())
      .enter().append("g")
        .attr("class", function(d) { return "node "+d.type+" "+d.status; })
        .on("click", function(d) {
          scope.data.info = d.type+" <br/> "+d.status;
          scope.$apply();
        })
        .call(force.drag);

    }
  };
});

当 {{datagr.info}} 中没有插入html时，这样可以正常工作。

我有什么选择在第二个区域插入HTML？

我应该创建另一个指令吗？

Answer 1

我找到了一个没有创建新自定义指令的解决方案：ngBindHtml（创建一个绑定，将innerHTML以一种安全的方式将表达式计算到当前元素中。）

现在而不是

.col-xs-12
  {{datagr.info}}

我有

.col-xs-12(ng-bind-html="datagr.info")

此解决方案依赖于ngSanitize（angular-sanitize.js）一个额外的Angular模块。

这个问题仍然适用于任何其他方法。

多个DOM操作的一个指令

1 个答案: