Question

有没有办法阻止div上的插值？我想从中获取原始html并通过像这样注入$interpolate来手动插值：

$scope.report = $interpolate($("#myDiv").html())($scope);

Answer 1

使用ngNonBindable指令。取自文档：

<div>Normal: {{1 + 2}}</div> // => Normal: 3
<div ng-non-bindable>Ignored: {{1 + 2}}</div> // => Ignored: {{1+2}}

但是，请注意，这可能无法编译该元素中存在的其他指令。

另一个选项（在我看来最正确）是创建一个指令并在编译阶段捕获元素的内容，然后只在需要时插入它：

app.directive("myDirective", function( $interpolate ) {
  return {
    compile: function( tElement ) {
      var raw = tElement.html();
      return function( scope, element ) {
        var interpolated = $interpolate( raw )( scope );
        // do something with it
      };
    }
  };
});

Answer 2

您可以使用使用脚本标记（https://docs.angularjs.org/api/ng/directive/script）

声明的内联模板

   <script type="text/ng-template" id="myDivTemplate">
      Hello my name is {{name}}
  </script>

然后将其插入为

$scope.report = $interpolate($("#myDivTemplate").html())($scope);

如何防止div上的AngularJS插值？

2 个答案: