【问题标题】:Angular 'PersonCtrl' is not a function, got undefinedAngular 'PersonCtrl' 不是函数,未定义
【发布时间】:2015-04-13 09:12:26
【问题描述】:

您好,我正在尝试使用 Typescript 构建我的第一个 Angular 应用,但我似乎无法正确绑定控制器。

这是我的打字稿代码:

module App {
   var modules: string[] = ["App.Person"];
   angular.module('App', modules)
          .run([]);
} 

    module App.Person {
        angular.module('App.Person', []);
    }

module App.Person {
    angular.module("App.Person")
           .controller('PersonCtrl', PersonCtrl);

    interface IPersonScope extends ng.IScope {
        fullName: string;
    }

    interface IPersonCtrl {

    }

    class PersonCtrl implements IPersonCtrl{
        public $scope: IPersonScope;

        static $inject = ['$scope'];
        constructor($scope: IPersonScope) {
            this.$scope = $scope;
            this.init();            
        }
        init() : void  {
            this.$scope.fullName = 'Justin S.';
        } 
    }
}

这是我的视图代码:

<article ng-app>
    <section ng-controller="PersonCtrl">
        <p ng-bind="fullName"></p>
    </section>
</article>

编辑 像这样更新我的html后:

   <article ng-app="App">
        <section ng-controller="PersonCtrl">
            <p ng-bind="fullName"></p>
        </section>
    </article>

我开始收到以下错误:

未捕获的错误:[ng:areq] 参数 'fn' 不是函数,未定义

所有相关的javascript文件都加载到页面上

【问题讨论】:

    标签: javascript angularjs typescript


    【解决方案1】:

    您需要提供应用名称、根模块 AppApp.Person (angular.module('App.Person')) em> 作为 ng-app 的值:

    // this should be the root module name
    <article ng-app="App">
    // or App.Person
    // <article ng-app="App.Person">
        <section ng-controller="PersonCtrl">
            <p ng-bind="fullName"></p>
        </section>
    </article>
    

    还要确保具有该定义的文件是页面&lt;script&gt;的一部分

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-06-04
      • 2016-10-04
      相关资源
      最近更新 更多