如何绑定一个AngularJS控制器动态添加HTML？ [英] How to bind an AngularJS controller to dynamically added HTML?
问题描述
对于这个场景，我有一个HTML页面与一些AngularJS指令，控制器等。
For this scenario, I have a page of HTML with some AngularJS directives, controllers, etc.
事情是这样的：
<html>
<body>
<div ng-controller="myCtrl">
<ul><li ng-repeat="item in items">{{item.name}}</li></ul>
</div>
<div class="placeholder">
...new HTML here...
</div>
</body>
</html>
请注意，还有就是页面上没有 NG-应用指令。我不是依赖于自动引导，而我使用的人工引导方法。
Notice that there is no ng-app directive on the page. I am not relying on auto-bootstrapping, but rather I am using the manual bootstrapping method.
angular.bootstrap(document, ['myApp']);
首先，创建将被自举到文档的模块。那么作为一个动态确定的依赖列表加载，我附上一些服务，控制器等，一旦万事俱备我所说的引导方法。
First, I create the module which will be bootstrapped to the document. Then as a dynamically determined list of dependencies are loaded, I attach some services, controllers, etc. Once everything is ready I call the bootstrap method.
这一切工作正常，直到JavaScript的AngularJS之外追加到在 ...在这里新的HTML ... 位置DOM。新的HTML不被AngularJS处理。
This all works fine, until JavaScript outside of AngularJS appends to the DOM at the ...new HTML here... location. The new HTML is not processed by AngularJS.
我的理解是，你需要调用 $范围。$适用（）或 $消化（）或东西拿到AngularJS识别新的HTML。然而，在我的例子周围有新的HTML没有控制器来在输入HTML可能看起来像这样：
My understanding is that you need to call $scope.$apply() or $digest() or something to get AngularJS to recognize the new HTML. However, in my example there is no controller around the new HTML coming in. The incoming HTML may look like this:
<div ng-controller="myOtherCtrl">
<h2>{{model.title}}</h2>
</div>
在换句话说，它是依靠该应用模块在不同的控制器上。
In other words, it is relying on a different controller in the app module.
- 我不能再调用
angular.bootstrap方法，因为页面已经被绑定。 - 我不能叫
$范围。$从控制器内适用因为整个的一点是，控制器code不被调用。 - 我不明白的方式，以重新申请或刷新才能到控制器的引用。
- I can't call the
angular.bootstrapmethod again, because the page is already bound. - I can't call
$scope.$applyfrom inside the controller because the whole point is that controller code isn't being called. - I don't see a way to get a reference to the controller in order to re-apply or refresh it.
我已阅读 Ifeanyi Isitor懒加载后和<一个href=\"http://www.bennadel.com/blog/2553-Loading-AngularJS-Components-After-Your-Application-Has-Been-Bootstrapped.htm\">Ben纳德尔帖子，但他们似乎并不满足现有的控制器的情况下外部加载HTML。
I have read the Ifeanyi Isitor lazy loading post and the Ben Nadel post, yet they don't seem to address HTML loaded outside the context of an existing controller.
这不是我用AngularJS指令来处理DOM操作的选项。它是使用ExtJS的作为用于注入新的DOM元素的框架的体系结构的一个独立部分。这意味着我不能使用ngInclude例如
It isn't an option for me to use AngularJS directives to handle the DOM manipulation. It is a separate part of the architecture which uses ExtJS as the framework for injecting the new DOM elements. This means I can't use ngInclude for example.
这似乎就像我可以叫 angular.module（'对myApp'）$刷新（）; 或 $适用（） 但是这是不是一种选择。我缺少什么？
It would seem like I could just call angular.module('myApp').$refresh(); or .$apply() but that isn't an option. What am I missing?
推荐答案
我面临着同样的问题，这就是我想出了：
I've faced the same issue, here's what I came up with :
<div id="mController" ng-controller="mainController">
</div>
<div id="ee">
2nd controller's view should be rendred here
</div>
和调用setCnt（）函数将注入并编译HTML，它会被链接到第二控制器：
and calling setCnt() function will inject and compile the html, and it will be linked to the 2nd controller:
var app = angular.module('app', []);
function setCnt() {
// Injecting the view's html
var e1 = angular.element(document.getElementById("ee"));
e1.html('<div ng-controller="ctl2">my name: {{name}}</div>');
// Compile controller 2 html
var mController = angular.element(document.getElementById("mController"));
mController.scope().activateView(e1);
}
app.controller("mainController", function($scope, $compile) {
$scope.name = "this is name 1";
$scope.activateView = function(ele) {
$compile(ele.contents())($scope);
$scope.$apply();
};
});
app.controller("ctl2", function($scope) {
$scope.name = "this is name 2";
});
这里来测试这样一个例子： http://refork.com/x4bc
希望这有助于。
这篇关于如何绑定一个AngularJS控制器动态添加HTML？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
