一个指令用于多个DOM操作

Question

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

在第一个区域中，我正在绘制一个力图 （ my-graph（data =“ datagr”） ），当用户单击该图的节点时，我正在尝试更新第二个区域（ {{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模块。

这个问题仍然对任何其他方法都开放。