jed*_*atu 14 javascript angularjs
对于这种情况,我有一个带有一些AngularJS指令,控制器等的HTML页面.
像这样的东西:
<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-app页面上没有指令.我不依赖于自动引导,而是使用手动引导方法.
angular.bootstrap(document, ['myApp']);
首先,我创建了将被引导到文档的模块.然后,当加载动态确定的依赖项列表时,我会附加一些服务,控制器等.一切准备就绪后,我调用bootstrap方法.
这一切都很好,直到AngularJS之外的JavaScript附加到该...new HTML here...位置的DOM .AngularJS不处理新的HTML.
我的理解是你需要调用$scope.$apply()或者$digest()什么来让AngularJS识别新的HTML.但是,在我的示例中,没有围绕新HTML的控制器.传入的HTML可能如下所示:
<div ng-controller="myOtherCtrl">
<h2>{{model.title}}</h2>
</div>
换句话说,它依赖于app模块中的不同控制器.
angular.bootstrap再次调用该方法,因为页面已经绑定. $scope.$apply从控制器内部调用,因为重点是控制器代码没有被调用. 我已经阅读了Ifeanyi Isitor延迟加载帖子和Ben Nadel帖子,但他们似乎没有解决在现有控制器的上下文之外加载的HTML.
我不能选择使用AngularJS指令来处理DOM操作.它是体系结构的一个独立部分,它使用ExtJS作为注入新DOM元素的框架.这意味着我不能使用ngInclude作为例子.
看起来我可以打电话angular.module('myApp').$refresh();,.$apply()但这不是一个选择.我错过了什么？
我遇到了同样的问题,这就是我想出的:
<div id="mController" ng-controller="mainController">
</div>
<div id="ee">
2nd controller's view should be rendred here
</div>
并调用setCnt()函数将注入并编译html,它将链接到第二个控制器:
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
希望这可以帮助.
我认为ng-include可能会对您有所帮助，它将部分页面加载到元素中，并像网页的任何其他部分一样编译和处理它。
如果此元素是您的网络应用程序的主视图，并且您想要根据 url 加载不同的“屏幕”，那么ng-view可能会派上用场。
| 归档时间： |
|
| 查看次数： |
34248 次 |
| 最近记录： |