Angularjs 加载控制器angular.js时出现问题

我试图使用

ui.router

resolve将我的控制器注入AngularJS，但在首先加载模板时遇到了问题。我的

app.js

定义如下：

var app = angular.module('app', ['ui.router']);

app.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/');

    $stateProvider
        .state('view1', {
            url: "/view1/",
            templateUrl: "view1/view1.html",
            resolve: {'': appendStaticFileToPage("view1/view1.js")}
        })

        .state('view2', {
            url: "/view2/",
            templateUrl: "view2/view2.html",
            resolve: {'': appendStaticFileToPage("view2/view2.js")}
        })

    ;

    function appendStaticFileToPage(file) {
        return function($q){
            var script = document.createElement('script');
            script.setAttribute('src', file);
            document.getElementsByTagName('head')[0].appendChild(script);
        };
    }

});

当用户单击某个状态的特定链接时，我将该链接的

js

文件插入浏览器。那部分很好用。但是

templateUrl

定义了要使用的模板，并且总是首先加载。由于它定义了一个

ng控制器

，发生的情况是控制器正在加载，但由于它还不在页面中，我在控制台中得到一个错误，无法找到控制器。我怎样才能做到这一点

我在这里创建了我的代码的简化版本：

有没有办法实现我在这里所做的事情

编辑

我以前在我的附加代码上有承诺，我将在下面展示：

function appendStaticFileToPage(file) {
    return function($q){
        var deferred = $q.defer();

        var script = document.createElement('script');
        script.setAttribute('src', file);
        document.getElementsByTagName('head')[0].appendChild(script).ready(function(){
            deferred.resolve();
        });

        return deferred.promise;
    };
}

---

当我这么做的时候，什么也没发生。它不会加载模板。它也不会显示我放在控制器中的

控制台.log

语句。

因为向.controller注册它不起作用，而且我可以确认脚本正在正确加载和执行，所以我尝试注入

$controllerProvider

服务并通过那里注册控制器，它起作用了

app.config(function($stateProvider, $urlRouterProvider, $controllerProvider) {

    $urlRouterProvider.otherwise('/');

    $stateProvider
        .state('view1', {
            url: "/view1/",
            templateUrl: "view1.html",
            resolve: {'': appendStaticFileToPage("view1.js", "MyViewOneController")}
        })

        .state('view2', {
            url: "/view2/",
            templateUrl: "view2.html",
            resolve: {'': appendStaticFileToPage("view2.js", "MyViewTwoController")}
        })

    ;

    function appendStaticFileToPage(file, controllerName) {
        return function($q){
            var deferred = $q.defer();

            var script = document.createElement('script');
            script.onload = function () {
                $controllerProvider.register(controllerName, window[controllerName])
                deferred.resolve();
            };
            script.onerror = function () {
                deferred.reject();
            };
            script.setAttribute('src', file);
            document.getElementsByTagName('head')[0].appendChild(script);

            return deferred.promise;
        };
    }

});

我还必须更新view1.js和view2.js，如下所示：

'use strict';
window.MyViewOneController = function($scope) {
  console.log("Got to view 1");
};

---

你忘了返回一个承诺，当控制器被加载到你的resolve函数时，这个承诺会得到解决。我也厌倦了这样做。但是模板没有被加载。好像什么都没发生。我甚至在我的控制器中放置了console语句，但它们都没有出现。我猜可能是脚本加载失败，或者是您侦听它加载的方式不正确。您的编辑已关闭，但是，您仍然没有解决延迟的问题，您只是创建了它，然后再也没有使用它。脚本正在正确加载，在加载脚本之前，它不会被解决，所以问题在于如何（或何时）将控制器连接到模块。延迟它不再具有排除任何竞争条件的效果。是否可以不在此处执行

script.onload

a

script.onerror

？我想将脚本和

document.getElementByTagName

抽象为不同的方法。是的，您可以让脚本（viewn.js）调用方法或触发事件