Question

我有100个控制器的巨大应用程序。假设它是一个Twitter应用程序。人们开始在推文中使用{{}}。

让我们说一条推文包含“{{imp：hello}}”从页面加载的数据库加载到dom中，而不在控制器内部。但是当为整个页面设置的角度加载ng-app将抛出$ parse错误。有没有办法可以告诉角度只编译ng-controller中存在的dom。

要明确我希望有角度保留{{imp：hello}}原样。

<html>
  <body>
    <div ng-app='sampleApp'>
      <p> {{ imp : hello }} {{ hello }} </p>
    </div>
    <div ng-controller='mycontroller'></div>
  </body>
</html>

Answer 1

<span ng-non-bindable>{{ imp : hello }}</span>

文档：https://docs.angularjs.org/api/ng/directive/ngNonBindable

Answer 2

如果您能够修改服务器端模板，我更喜欢@JBNizet解决方案，即在用于生成ng-non-bindable标记的服务器端模板中添加p。

但是如果你真的需要在客户端做，你可以编写一个指令来拦截正常的编译，然后手动编译只包含ng-controller属性的元素。

app.directive('compileOnlyNgController', function ($compile) {
  return {
    restrict: 'A',
    terminal: true, // intercept a normal compilation
    priority: 1000,
    link: function (scope, element) {
      // compile only children elements that contain a ng-controller attribute;
      $compile(element[0].querySelectorAll('[ng-controller]'))(scope);
    }
  }
});

并将其放入ng-app元素：

<div ng-app="sampleApp" compile-only-ng-controller>
  <p>{{ imp : hello }} {{ hello }}</p>
  <div ng-controller="mycontroller">
    <p>{{ hello }}</p>
  </div>
</div>

示例Plunker： http://plnkr.co/edit/zo4LyAt3d1WMhkayIbqb?p=preview

Angular只编译ng-controller中的dom元素

2 个答案: