我有一个应用程序,我正在异步加载一个登录模式,因此它可以在构成应用程序的多个平台上使用。我正在为模态加载和绑定HTML,但是我无法找到一种方法来初始化在异步加载它之后在模态中的Angular控制器。这是基本的想法:
<div ng-controller="loginController" ng-init="loadModal()">
<a ng-click="openModal()">LOG IN</a>
<div ng-bind-html="modalHTML">
// Once loaded, I need to initialize the AngularJS in here, fr'ex:
<ul>
<li ng-repeat="item for item in items>{{item.blerg}}</li>
</ul>
</div>
</div>
注意,我实际上并没有使用ng-init,而是通过服务加载。这是一个超级愚蠢的版本,因为使JSBins占用大量时间。
答案 0 :(得分:2)
如果我理解正确,您需要将加载的HTML附加到控制器的范围。我认为最简单的方法是创建一个自定义指令来加载HTML,&#34; compile&#34;它并将其附加到模态。
这是一个简单的例子:
HTML
<div ng-controller="loginController">
<div async-modal>
</div>
</div>
JS
angular.module('test', []).controller('loginController', function ($scope) {
$scope.items = ['one', 'two', 'three'];
}).directive('asyncModal', function ($compile, $timeout) {
return {
restrict: 'A',
scope: false,
link: function (scope, element) {
// $timeout is here just to emulate async behaviour
// this should be your loader service
$timeout(function () {
// lets assume that this is the loaded HTML
var html = '<ul><li ng-repeat="item in items">{{item}}</li></ul>';
element.append($compile(html)(scope));
}, 1000);
}
};
});
编辑:
经过一番思考后,您可能只能使用ng-include而不是ng-bind-html,但这取决于您加载HTML的方式。