angularjs - 角度和动态 HTML

Question

具有动态 HTML 和 Angular 的页面的最佳方法是什么？我的意思是，我正在使用 DataTables.net 来显示搜索结果，并且我需要能够使用 Angular 编辑每个单元格。当然，HTML 没有在 Angular 中绑定，因为它是在执行搜索之后创建的，并且 Angular 已经将 hmlt 绑定到它的范围。

Answer 1

听起来您正在尝试使用 Angular 进行 DOM 操作。如果是这样的话，Angular 可能不是完成这项工作的最佳工具。Vanilla.js 或 jQuery 库之类的东西会更适合。

如果您确实在动态加载的 HTML 中有一个涉及的应用程序，最好的方法是标记 HTML 以包含您的应用程序并手动调用angular.bootstrap。由于您手动引导，您不必担心嵌套应用程序。

我可以在 AngularJS 中的另一个 ng-app 中使用一个 ng-app

http://docs.angularjs.org/api/ng/directive/ngApp

每个 HTML 文档只能自动引导一个 AngularJS 应用程序。在文档中找到的第一个 ngApp 将用于定义根元素以自动引导为应用程序。要在 HTML 文档中运行多个应用程序，您必须使用 angular.bootstrap 手动引导它们。

angular.module('HelloApp',[])
.controller('HelloController',[function(){
  var helloController = this;
  helloController.helloWorld = 'Hello World!';
  }]);

setTimeout(function(){
  document.getElementById('insertHere').innerHTML = 
  '<div ng-app="HelloApp" ng-controller="HelloController as helloController">{{helloController.helloWorld}}</div>';
  angular.bootstrap(document, ['HelloApp']);
  
  },5000)

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="insertHere">
  Loading in 5 seconds
</div>

如果您正在尝试使用已经运行的应用程序，我能想到的唯一方法是从 Angular 外部访问/更新 $rootScope ，由于答案中解释的原因，这是不好的。