Javascript 为什么在下面的示例中不调用$onInit方法？

我想用angular的分量法，但似乎有点不对劲。我已经仔细检查这个代码有一段时间了。没有打字错误，它似乎适合文档，但仍然不起作用

我已经安装了Angular 1.5.3

控制台上没有输出。根据和博客条目，我应该看到“onInit”文本

组件的模板显示正确，我可以看到模板已加载，但控制器似乎未实例化/启动

我的应用程序是用Typescript编写的

组件：

module sayusiando.dilib.spa {

    export class LeftHandMenuComponent implements ng.IComponentOptions {

        public transclude: boolean = false;
        public controller: Function = LeftHandMenuController;
        public controllerAs: string = "vm";
        public templateUrl: string = "app/layout/leftHandMenu/leftHandMenuTemplate.html";

    }

    angular
        .module("dilib")
        .component("dilibLeftHandMenu", new LeftHandMenuComponent());
}

var sayusiando;
(function (sayusiando) {
    var dilib;
    (function (dilib) {
        var spa;
        (function (spa) {
            var LeftHandMenuComponent = (function () {
                function LeftHandMenuComponent() {
                    this.transclude = false;
                    this.controller = spa.LeftHandMenuController;
                    this.controllerAs = "vm";
                    this.templateUrl = "app/layout/leftHandMenu/leftHandMenuTemplate.html";
                }
                return LeftHandMenuComponent;
            })();
            spa.LeftHandMenuComponent = LeftHandMenuComponent;
            angular
                .module("dilib")
                .component("dilibLeftHandMenu", new LeftHandMenuComponent());
        })(spa = dilib.spa || (dilib.spa = {}));
    })(dilib = sayusiando.dilib || (sayusiando.dilib = {}));
})(sayusiando || (sayusiando = {}));

<div>
    <dilib-left-hand-menu class="col-lg-2"></dilib-left-hand-menu>
</div>

module sayusiando.dilib.spa {
    "use strict";

    export interface ILeftHandMenuController {
    }


    export class LeftHandMenuController implements ILeftHandMenuController {

        $onInit: Function = (() => {console.log("onInit");});


        static $inject = ["LeftHandMenuService"];
        constructor(leftHandMenuService: sayusiando.dilib.spa.ILeftHandMenuService) {

            console.log("con");
            this.leftHandMenuService = leftHandMenuService;

            //this.activate();
            console.log("construct");
        }

        activate() { //activate logic }

    }

    angular
        .module('dilib')
        .controller('leftHandMenuController', LeftHandMenuController);

}

var sayusiando;
(function (sayusiando) {
    var dilib;
    (function (dilib) {
        var spa;
        (function (spa) {
            "use strict";
            var LeftHandMenuController = (function () {
                function LeftHandMenuController(leftHandMenuService) {
                    this.$onInit = (function () { console.log("onInit"); });
                    console.log("con");
                    this.leftHandMenuService = leftHandMenuService;
                    //this.activate();
                    console.log("construct");
                }
                LeftHandMenuController.prototype.activate = function () {
                    var _this = this;
                    this.leftHandMenuService.getLeftHandMenu()
                        .then(function (result) {
                        _this.leftHandMenu = result;
                    });
                };
                LeftHandMenuController.$inject = ["LeftHandMenuService"];
                return LeftHandMenuController;
            })();
            spa.LeftHandMenuController = LeftHandMenuController;
            angular
                .module('dilib')
                .controller('leftHandMenuController', LeftHandMenuController);
        })(spa = dilib.spa || (dilib.spa = {}));
    })(dilib = sayusiando.dilib || (sayusiando.dilib = {}));
})(sayusiando || (sayusiando = {}));

编译代码：

module sayusiando.dilib.spa {

    export class LeftHandMenuComponent implements ng.IComponentOptions {

        public transclude: boolean = false;
        public controller: Function = LeftHandMenuController;
        public controllerAs: string = "vm";
        public templateUrl: string = "app/layout/leftHandMenu/leftHandMenuTemplate.html";

    }

    angular
        .module("dilib")
        .component("dilibLeftHandMenu", new LeftHandMenuComponent());
}

var sayusiando;
(function (sayusiando) {
    var dilib;
    (function (dilib) {
        var spa;
        (function (spa) {
            var LeftHandMenuComponent = (function () {
                function LeftHandMenuComponent() {
                    this.transclude = false;
                    this.controller = spa.LeftHandMenuController;
                    this.controllerAs = "vm";
                    this.templateUrl = "app/layout/leftHandMenu/leftHandMenuTemplate.html";
                }
                return LeftHandMenuComponent;
            })();
            spa.LeftHandMenuComponent = LeftHandMenuComponent;
            angular
                .module("dilib")
                .component("dilibLeftHandMenu", new LeftHandMenuComponent());
        })(spa = dilib.spa || (dilib.spa = {}));
    })(dilib = sayusiando.dilib || (sayusiando.dilib = {}));
})(sayusiando || (sayusiando = {}));

<div>
    <dilib-left-hand-menu class="col-lg-2"></dilib-left-hand-menu>
</div>

module sayusiando.dilib.spa {
    "use strict";

    export interface ILeftHandMenuController {
    }


    export class LeftHandMenuController implements ILeftHandMenuController {

        $onInit: Function = (() => {console.log("onInit");});


        static $inject = ["LeftHandMenuService"];
        constructor(leftHandMenuService: sayusiando.dilib.spa.ILeftHandMenuService) {

            console.log("con");
            this.leftHandMenuService = leftHandMenuService;

            //this.activate();
            console.log("construct");
        }

        activate() { //activate logic }

    }

    angular
        .module('dilib')
        .controller('leftHandMenuController', LeftHandMenuController);

}

var sayusiando;
(function (sayusiando) {
    var dilib;
    (function (dilib) {
        var spa;
        (function (spa) {
            "use strict";
            var LeftHandMenuController = (function () {
                function LeftHandMenuController(leftHandMenuService) {
                    this.$onInit = (function () { console.log("onInit"); });
                    console.log("con");
                    this.leftHandMenuService = leftHandMenuService;
                    //this.activate();
                    console.log("construct");
                }
                LeftHandMenuController.prototype.activate = function () {
                    var _this = this;
                    this.leftHandMenuService.getLeftHandMenu()
                        .then(function (result) {
                        _this.leftHandMenu = result;
                    });
                };
                LeftHandMenuController.$inject = ["LeftHandMenuService"];
                return LeftHandMenuController;
            })();
            spa.LeftHandMenuController = LeftHandMenuController;
            angular
                .module('dilib')
                .controller('leftHandMenuController', LeftHandMenuController);
        })(spa = dilib.spa || (dilib.spa = {}));
    })(dilib = sayusiando.dilib || (sayusiando.dilib = {}));
})(sayusiando || (sayusiando = {}));

布局模板：

module sayusiando.dilib.spa {

    export class LeftHandMenuComponent implements ng.IComponentOptions {

        public transclude: boolean = false;
        public controller: Function = LeftHandMenuController;
        public controllerAs: string = "vm";
        public templateUrl: string = "app/layout/leftHandMenu/leftHandMenuTemplate.html";

    }

    angular
        .module("dilib")
        .component("dilibLeftHandMenu", new LeftHandMenuComponent());
}

var sayusiando;
(function (sayusiando) {
    var dilib;
    (function (dilib) {
        var spa;
        (function (spa) {
            var LeftHandMenuComponent = (function () {
                function LeftHandMenuComponent() {
                    this.transclude = false;
                    this.controller = spa.LeftHandMenuController;
                    this.controllerAs = "vm";
                    this.templateUrl = "app/layout/leftHandMenu/leftHandMenuTemplate.html";
                }
                return LeftHandMenuComponent;
            })();
            spa.LeftHandMenuComponent = LeftHandMenuComponent;
            angular
                .module("dilib")
                .component("dilibLeftHandMenu", new LeftHandMenuComponent());
        })(spa = dilib.spa || (dilib.spa = {}));
    })(dilib = sayusiando.dilib || (sayusiando.dilib = {}));
})(sayusiando || (sayusiando = {}));

<div>
    <dilib-left-hand-menu class="col-lg-2"></dilib-left-hand-menu>
</div>

module sayusiando.dilib.spa {
    "use strict";

    export interface ILeftHandMenuController {
    }


    export class LeftHandMenuController implements ILeftHandMenuController {

        $onInit: Function = (() => {console.log("onInit");});


        static $inject = ["LeftHandMenuService"];
        constructor(leftHandMenuService: sayusiando.dilib.spa.ILeftHandMenuService) {

            console.log("con");
            this.leftHandMenuService = leftHandMenuService;

            //this.activate();
            console.log("construct");
        }

        activate() { //activate logic }

    }

    angular
        .module('dilib')
        .controller('leftHandMenuController', LeftHandMenuController);

}

var sayusiando;
(function (sayusiando) {
    var dilib;
    (function (dilib) {
        var spa;
        (function (spa) {
            "use strict";
            var LeftHandMenuController = (function () {
                function LeftHandMenuController(leftHandMenuService) {
                    this.$onInit = (function () { console.log("onInit"); });
                    console.log("con");
                    this.leftHandMenuService = leftHandMenuService;
                    //this.activate();
                    console.log("construct");
                }
                LeftHandMenuController.prototype.activate = function () {
                    var _this = this;
                    this.leftHandMenuService.getLeftHandMenu()
                        .then(function (result) {
                        _this.leftHandMenu = result;
                    });
                };
                LeftHandMenuController.$inject = ["LeftHandMenuService"];
                return LeftHandMenuController;
            })();
            spa.LeftHandMenuController = LeftHandMenuController;
            angular
                .module('dilib')
                .controller('leftHandMenuController', LeftHandMenuController);
        })(spa = dilib.spa || (dilib.spa = {}));
    })(dilib = sayusiando.dilib || (sayusiando.dilib = {}));
})(sayusiando || (sayusiando = {}));

编译的控制器代码：

module sayusiando.dilib.spa {

    export class LeftHandMenuComponent implements ng.IComponentOptions {

        public transclude: boolean = false;
        public controller: Function = LeftHandMenuController;
        public controllerAs: string = "vm";
        public templateUrl: string = "app/layout/leftHandMenu/leftHandMenuTemplate.html";

    }

    angular
        .module("dilib")
        .component("dilibLeftHandMenu", new LeftHandMenuComponent());
}

var sayusiando;
(function (sayusiando) {
    var dilib;
    (function (dilib) {
        var spa;
        (function (spa) {
            var LeftHandMenuComponent = (function () {
                function LeftHandMenuComponent() {
                    this.transclude = false;
                    this.controller = spa.LeftHandMenuController;
                    this.controllerAs = "vm";
                    this.templateUrl = "app/layout/leftHandMenu/leftHandMenuTemplate.html";
                }
                return LeftHandMenuComponent;
            })();
            spa.LeftHandMenuComponent = LeftHandMenuComponent;
            angular
                .module("dilib")
                .component("dilibLeftHandMenu", new LeftHandMenuComponent());
        })(spa = dilib.spa || (dilib.spa = {}));
    })(dilib = sayusiando.dilib || (sayusiando.dilib = {}));
})(sayusiando || (sayusiando = {}));

<div>
    <dilib-left-hand-menu class="col-lg-2"></dilib-left-hand-menu>
</div>

module sayusiando.dilib.spa {
    "use strict";

    export interface ILeftHandMenuController {
    }


    export class LeftHandMenuController implements ILeftHandMenuController {

        $onInit: Function = (() => {console.log("onInit");});


        static $inject = ["LeftHandMenuService"];
        constructor(leftHandMenuService: sayusiando.dilib.spa.ILeftHandMenuService) {

            console.log("con");
            this.leftHandMenuService = leftHandMenuService;

            //this.activate();
            console.log("construct");
        }

        activate() { //activate logic }

    }

    angular
        .module('dilib')
        .controller('leftHandMenuController', LeftHandMenuController);

}

var sayusiando;
(function (sayusiando) {
    var dilib;
    (function (dilib) {
        var spa;
        (function (spa) {
            "use strict";
            var LeftHandMenuController = (function () {
                function LeftHandMenuController(leftHandMenuService) {
                    this.$onInit = (function () { console.log("onInit"); });
                    console.log("con");
                    this.leftHandMenuService = leftHandMenuService;
                    //this.activate();
                    console.log("construct");
                }
                LeftHandMenuController.prototype.activate = function () {
                    var _this = this;
                    this.leftHandMenuService.getLeftHandMenu()
                        .then(function (result) {
                        _this.leftHandMenu = result;
                    });
                };
                LeftHandMenuController.$inject = ["LeftHandMenuService"];
                return LeftHandMenuController;
            })();
            spa.LeftHandMenuController = LeftHandMenuController;
            angular
                .module('dilib')
                .controller('leftHandMenuController', LeftHandMenuController);
        })(spa = dilib.spa || (dilib.spa = {}));
    })(dilib = sayusiando.dilib || (sayusiando.dilib = {}));
})(sayusiando || (sayusiando = {}));

---

我认为这是因为模块定义中缺少依赖项参数列表。这两种说法有所不同：

angular.module("dilib")
angular.module("dilib",[])

---

第一条语句尝试访问名为dilib的现有模块，而第二条语句尝试创建没有依赖项的模块dilib。我相信您正在尝试创建一个新模块，因此需要第二种格式。

我用错误的方式调用了$oninit。以下是正确且运行良好的代码：

module sayusiando.dilib.spa {
    "use strict";

    export interface ILeftHandMenuControllerScope {

    }


    export class LeftHandMenuController implements ILeftHandMenuControllerScope {

        public leftHandMenu: Array<sayusiando.dilib.spa.IModuleContract>;

        static $inject = ["leftHandMenuService"];
        constructor(
            private leftHandMenuService: sayusiando.dilib.spa.ILeftHandMenuService) {

        }


        public $onInit = () => {

            this.leftHandMenuService.getLeftHandMenu()
                .then((result: Array<sayusiando.dilib.spa.IModuleContract>): void => {
                    this.leftHandMenu = result;
                });

        }

    }

    angular
        .module('dilib')
        .controller('leftHandMenuController', LeftHandMenuController);

}

模块sayusiando.dilib.spa{
“严格使用”；
导出接口ILeftHandMenuControllerScope{
}
导出类LeftHandMenuController实现ILeftHandMenuController范围{
公共左手菜单：数组；
静态$inject=[“leftHandMenuService”]；
建造师(
私人leftHandMenuService:sayusiando.dilib.spa.ILeftHandMenuService）{
}
public$onInit=（）=>{
this.leftHandMenuService.getLeftHandMenu（）文件
.then（（结果：数组）：void=>{
this.leftHandMenu=结果；
});
}
}
有棱角的
.module（'dilib'）
.controller（“leftHandMenuController”，leftHandMenuController）；
}

谢谢您的回答！我认为这不是问题所在。这个组件是一个更大的应用程序的一部分，我也使用其他组件。我没有遇到这个问题的原因是，我没有使用现有组件的控制器。到目前为止，组件构建了应用程序的布局。此外，我没有看到在布局模板中使用ng控制器指令。您是否将其与其他地方的模板关联？我浏览了文档，没有直接调用控制器的示例。有。在，搜索文本ng控制器。