3

引导 AngularJS 后，我似乎无法添加控制器。我得到的异常表明传递的控制器函数不是函数。但是，在 Chrome 调试器中，它显示为预期的功能。

（我意识到我没有使用初始化 AngularJS 的声明式风格，我正在探索框架。）

例外

Error: Argument 'MediaLoaderController' is not a function, got undefined
    at Error (<anonymous>)
    at $a (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:16:453)
    at qa (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:17:56)
    at $get (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:52:219)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:43:348
    at m (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:6:494)
    at i (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:43:213)
    at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:307)
    at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:324)
    at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:324) angular.min.js:62
(anonymous function) angular.min.js:62
$get angular.min.js:52
$get.e.$apply angular.min.js:88
(anonymous function) angular.min.js:16
d angular.min.js:27
c angular.min.js:16
rb angular.min.js:16
Bootstrapper.instance.bootstrapAngularJS bootstrapper.js:19
(anonymous function) slide_template_angularjs.jsp:20
x.Callbacks.c jquery.js:3048
x.Callbacks.p.fireWith jquery.js:3160
x.extend.ready jquery.js:433
q

HTML

<html>
    <head>
        <title></title>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>        
        <script src="/js/bootstrapper.js"></script>
        <script language="JavaScript">

            var bootstrapper = null;
            var controllerLibrary = null;

            $(document).ready( function(){
                bootstrapper = new Bootstrapper();
                controllerLibrary = new ControllerLibrary(); 

                bootstrapper.bootstrapAngularJS();
                bootstrapper.myModule.controller( "MediaLoaderController", controllerLibrary.MediaLoaderController );               
            });
            </script>
    </head>
    <body>
        <div ng-controller="MediaLoaderController">
            {{status}}
        </div>
    </body>
</html>

JavaScript

function Bootstrapper() {

    var instance = new Object();

    instance.myModule = null;
    /*
     * Bootstrap AngularJS and initialize myModule
     */
    instance.bootstrapAngularJS = function() {
        instance.myModule = angular.module('myModule', []);
        angular.bootstrap(document, ['myModule']);
    };

    return instance;
}


function ControllerLibrary() {
}

ControllerLibrary.prototype.MediaLoaderController = function($scope) {
    $scope.status = "loading";
};
4

1 回答 1

3

您必须在引导发生之前注册控制器，否则 AngularJS 找不到控制器并抛出错误。请参阅此处的工作plunker。摘录如下。

function Bootstrapper() {
    var instance = new Object();
    instance.myModule = angular.module('myModule', []);
    instance.bootstrapAngularJS = function() {
        angular.bootstrap(document, ['myModule']);
    };
    return instance;
}

$(document).ready( function(){
    bootstrapper = new Bootstrapper();
    controllerLibrary = new ControllerLibrary(); 
    bootstrapper.myModule.controller( "MediaLoaderController", controllerLibrary.MediaLoaderController );               
    bootstrapper.bootstrapAngularJS();
});
于 2013-10-02T20:55:06.933 回答