angularjs - 如何防止 AngularJS 在 div 上插值？

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);