我必须使用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中工作得很好