Angularjs:视图中的ui-router控制器抛出错误

时间:2017-03-12 21:26:29

标签: angularjs angular-ui-router

我正在尝试注入一个在状态解析时加载的控制器文件,控制器已注册$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

为什么会发生这种错误?

1 个答案:

答案 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);