我正在尝试注入一个在状态解析时加载的控制器文件,控制器已注册$controllerProvider.register
但是当我尝试调用控制器时状态会引发错误
州航线:
(function(angular){
var app = angular.module("app");
app.config([
"$stateProvider",
"$controllerProvider",
"$compileProvider",
function($stateProvider, $controllerProvider, $compileProvider){
app.$controller = $controllerProvider.register;
app.$directive = $compileProvider.directive;
$stateProvider.state("main", {
url: "/",
views: {
content: {
templateUrl: "templates/home.html",
controller: "HomeController"
}
},
resolve: {
load: () => {
// return loadJs("assets/app/controllers/HomeController.js");
return loadDependecy({
url: "assets/app/controllers/HomeController.js",
tag: "script"
});
}
}
});
}
]);
/**
* Loads dependecy files asynchronously
*
* @param {Array|Object} dep The dependecy detail to load in the DOM
* @return {Promise} The promise of the result on loading the dependecies
*/
function loadDependecy(dep){
// Load a single dependecy if argument is object
if(isType("object", dep)){
return new Promise((resolve, reject) => {
if(dependecyExists(dep.tag, dep.url)){
resolve();
}
else{
var dependecy = document.createElement(dep.tag);
var parent = document.querySelector(dep.tag == "script" ? "body" : "head");
// Set async to not stop browser loading
dependecy.async = "async";
if(dep.tag == "script"){
dependecy.type = "text/javascript";
dependecy.src = dep.url;
}
else if(dep.tag == "link"){
dependecy.type = "text/css";
dependecy.rel = "stylesheet";
dependecy.href = dep.url;
}
// Resolve the promise if dependecy loads successfully
dependecy.onload = () => {
resolve();
};
// Rejects the promise if something happens
dependecy.onerror = (error) => {
reject(error);
};
parent.appendChild(dependecy);
}
});
}
// Load all the dependecies if argument is array list
else if(isType("array", dep)){
var promises = [];
dep.forEach((element) => {
promises.push(loadDependecy(element));
});
return Promise.all(promises);
}
}
/**
* Checks if a dependecy tag is in the DOM with the provided url
*
* @param {String} tag The name of the dependecy tag to find in DOM
* @param {String} url The url of the dependecy path within the dependecy
* @return {Boolean} Whether the dependecy tag exists in the DOM
*/
function dependecyExists(tag, url){
var reqAttr = {
script: "src",
link: "href"
};
var dep = document.querySelector(`${tag}[${reqAttr[tag]}="${url}"]`);
return dep != null;
}
/**
* Validates the object type of the provided value object
*
* @param {String} type The type validation name to use in the condition
* @param {Any} obj The value to test the validation type
* @return {Boolean} Whether the validation is success
* @todo Optimize this
*/
function isType(type, obj){
var result = Object.prototype.toString.call(obj);
if(type == "array"){
return result == "[object Array]";
}
else if(type == "object"){
return result == "[object Object]";
}
return false;
}
})(angular);
加载的控制器:
((angular) => {
var app = angular.module("app");
app.$controller("HomeController", ["$scope", ($scope) => {
}]);
})(angular);
调用视图时,控制台会抛出错误:
Error: function bound () {
[native code]
} is not a constructor
为什么会发生这种错误?
答案 0 :(得分:0)
经过几天的挣扎,并在社区中询问,我能够跟踪错误并修复它..结果控制器寄存器由于某种原因使用ES-6 arrow functions
不支持控制器配方..所以我的修复是只是在没有arrow function
((angular) => {
var app = angular.module("app");
app.$controller("HomeController", ["$scope", function($scope){ //Function was previously defined with arrow function
}]);
})(angular);