在angularjs的指令中动态注册控制器

时间:2017-03-18 08:30:24

标签: javascript angularjs

我必须使用angular开发单页应用程序。我需要在指令中按需注册控制器。我在app.config中做了这个,我设置了我的URL,但是我不能在指令中做到这一点。

我想用Promises做这个,这是我自己的代码

这是我的指令代码

app.directive('componentLoader', ['$http', '$q','loader', function ($http, $q,loader) {
//app.registerCtrl = $controllerProvider.register;
var controllerpath;
var viewpath;
return {

    restrict: 'AE',
    replace: true,
    name: 'ctrl',
    controller: '@',
    compile: function (element, attrs) {


        //'Modules-blue'
        var urlArray = attrs.component.split('-');
        var urlpath = '';

        for (var i = 0; i < urlArray.length; i++) {
            urlpath += (i == 0 ? '' : '/') + urlArray[i];
        }

        controllerpath = urlpath + "/controllers/" + urlArray[urlArray.length - 1] + ".js";
        viewpath = urlpath + "/views/" + urlArray[urlArray.length - 1] + ".html";


        var htmlText = '';
        $http.get(viewpath)
            .then(function (response) {

                htmlText = response.data;
                element.replaceWith(htmlText);
                loader.loadcomponent(controllerpath);
            });

    },

}}]);

这是我在指令

中注入的加载器服务
app.service('loader', function ($q,$controller) {


function loadScript(path) {

    var result = $.Deferred(),
    script = document.createElement("script");
    script.async = "async";
    script.type = "text/javascript";
    script.src = path;
    script.onload = script.onreadystatechange = function (_, isAbort) {
        if (!script.readyState || /loaded|complete/.test(script.readyState)) {
            if (isAbort)
                result.reject();
            else
                result.resolve();
        }
    };
    script.onerror = function () { result.reject(); };
    document.querySelector("head").appendChild(script);
    return result.promise();
}

function loader(arrayName) {

    return {
        load: function ($q) {

            var deferred = $q.defer(),
            map = arrayName.map(function (name) {
                return loadScript(name);
            });

            $q.all(map).then(function (r) {
                deferred.resolve();
            });

            return deferred.promise;
        }
    };
};


this.loadcomponent = function (url) {

    var urlarray = new Array();
    urlarray.push(url);

    loader(urlarray).load($q);

};});

这个代码寄存器在页面中的脚本但它完全不运行,而这个服务在app.config中工作得很好

0 个答案:

没有答案