Question

我有这个目录结构

--- js/app.js
------- components
----------- header
-------------- headerComponent.html
-------------- headerComponent.js
-------------- headerController.js

在index.html中，我有这个

    <!DOCTYPE html>
<html en="us" ng-app="app">

<head>
    <title>Jogo da Memória - DB1</title>
    <!-- bootsrap css-->
    <link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap.min.css">
    <script src="lib/angular/angular.min.js"></script>
    <script src="js/app.js"></script>
    <!-- components -->
    <script src="js/components/header/headerComponent.js"></script>
</head>

<body>
    <div class="container" ng-controller="HomeCtrl as $ctrl">
        <h1>{{$ctrl.message}} </h1>
        <header></header>
    </div>
</body>

</html>

js / app.js

    (function() {
       var app = angular.module('app', []);
       app.controller('HomeCtrl', function() {});
    })();

component / header / headerComponent.js

    (function() {
    'use strict';
    var app = angular.module('app');

    app.component('header', {
        templateUrl: '/js/components/header/headerComponent.html',
        controller: 'headerController'
    });
})();

component / header / headerController.js

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

    app.controller('headerController', ['$scope', function($scope) {
      $scope.titulo = "teste";
   }])

component / header / headercomponent.html

<h1>{{titulo}}</h1>

问题是未呈现变量“ titulo”。我不想在组件文件中使用controller：function（）{}结构。而且我有此错误： 未捕获的错误：[$ injector：modulerr] 我会呼叫外部控制器。我该怎么办？

Answer 1

您要两次定义模块，第二次是在component/header/headerController.js中。

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

应更改为：

var app = angular.module('app');

您的component/header/headerController.js中还没有通过脚本标记包含index.html。

控制器未在组件中加载-AngularJS

1 个答案: