Question

我有一个应用程序，我正在异步加载一个登录模式，因此它可以在构成应用程序的多个平台上使用。我正在为模态加载和绑定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占用大量时间。

Answer 1

如果我理解正确，您需要将加载的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);
        }
    };
});

DEMO

编辑：

经过一番思考后，您可能只能使用ng-include而不是ng-bind-html，但这取决于您加载HTML的方式。

Angular.js：在异步加载的模板上初始化控制器？

1 个答案: