controller - 是否可以在 AngularJS 中向 DOM 注入控制器？

Question

我对 angularjs 比较陌生，我想做的是创建一个类似 ngView 的组件。
所以有一个很重要的过程就是给DOM注入一个控制器。
假设我们有一个 DOM，

<div>
    <span>Name: {{name}}</span>
</div>

和一个控制器，

function InjectedController($scope) {  
   $scope.name = "Leo Yuan";  
} 

我想做的是将控制器“InjectedController”注入到部门中，
我尝试编写像ngView一样的代码，
$("div").contents().data('$ngControllerController', InjectedController);
但是还是不行，有什么问题吗？

Answer 1

您可以通过将控制器直接包含到 HTML 中来做到这一点。确保将此 HTML 存储为模板或变量，然后将其作为字符串加载。

<div data-ng-controller="%%controller%%">
  <span>Name: {{name}}</span>
</div>

使用 JavaScript 将 %%controller%% 部分替换为您想要的任何控制器。

然后要么直接运行，要么自行编译该 HTML

var templateHTML = "..."; //either download it with XHR or make it an inline template
templateHTML = templateHTML.replace('%%controller%%', injectedController);

//inject the $compile service into the function body
//grab the scope if it's not already there
$scope = $scope || angular.element(document).scope();

//this should run the controller automatically
$compile(templateHTML)($scope);