October 16, 2018

[SOLVED] Inject angularjs on elements added by innerHTML (e.g. magento 1.9 checkout)


function injectIbanValidation() {

    var ibanPlaceholder = document.getElementById('iban_placeholder');

    var ibanInput = '<input type="text" ng-model="iban" ng-iban/>';

    //emulate html injection in    ibanPlaceholder.innerHTML = ibanInput;

    var ibanElement = ibanPlaceholder.querySelector('input');

    /**     * inject angular component magic     */    var $injector = angular.injector(['ng', 'mpb.app', ['$provide', function($provide) {
        var $rootElement = angular.element(document.querySelector('body'));
        console.log('$rootElement', $rootElement);
        $provide.value('$rootElement', $rootElement);
    }]]);

    if (ibanInput) {
        $injector.invoke(['$rootScope', '$compile', function($rootScope, $compile) {
            console.log('invoke', $rootScope, $compile);
            $compile(angular.element(ibanInput))($rootScope);
        }])
    }

}