Angular.js : Initializing a controller on an asynchronously loaded template?

Question

I have an application where I'm loading a login modal asynchronously so it's available across the multiple platforms that make up the application. I'm loading and binding the HTML for the modal, but I can't find a way to initialize the Angular controller that is IN the modal after loading it asynchronously. Here's the basic idea:

<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>

Note, I'm not actually using ng-init, I'm loading via a service. This is a super-dumbed-down version because making JSBins takes a poopload of time.

pablochan · Accepted Answer · 2014-12-13 20:55:57Z

If I understand correctly, you need to attach the loaded HTML to the controller's scope. I think the easiest way is to create a custom directive that will load the HTML, "compile" it and attach it to the modal.

Here is a simple example:

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

EDIT:

After some thought, you might be able to just use ng-include instead of ng-bind-html, but it does depend on how you load the HTML.

Collectives™ on Stack Overflow

Angular.js : Initializing a controller on an asynchronously loaded template?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related