2017-03-12 8 views
1

状態解決時にロードされるコントローラファイルを注入しようとしていますが、コントローラは$controllerProvider.registerに登録されていますが、コントローラを呼び出すときAngularjs:ビュー内のui-routerコントローラがエラーをスローする

状態ルート:

(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

コミュニティで苦労して苦労した後、エラーを追跡して修正できました。コントローラーのレジスタが何らかの理由でコントローラーのレシピをサポートしていないことが判明しました。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); 
関連する問題