javascript - AngularJS 指令不显示模板

Question

我的 Angular Directive(指令)有一些问题。此应用程序的预期结果是使用 Angular Directive(指令)和 html 模板在主 Controller 中显示来自数组的私有(private)教练配置文件。我似乎无法弄清楚为什么这不起作用，下面复制了代码片段。控制台没有显示任何错误，我可以手动解析来自 trainers 数组的数据绑定(bind)，但我希望模板显示此...

HTML:

...
<div ng-controller="MainController">
    <div ng-repeat="trainer in trainers">
      <app-info></app-info>
    </div>
</div>
...

主 Controller .js:

angular.module('reasons', []).controller('MainController', ['$scope', function($scope) {
    $scope.trainers = [ 
        { 
            name: 'Mike',
            email: 'mike@gym.com',
            tel: '07191941249',
            info: 'I am a gym instructor',
            quote: 'Inspirational Quote'
        }, ... ]
}]);

app-info 指令:

app.directive('appInfo', function() { 
    return { 
        restrict: 'E', 
        scope: {}, 
        templateUrl: 'js/directives/appInfo.html' 
    }; 
});

app-info 指令模板:

<div>
<h3>{{trainer.name}}</h3>
<p>{{trainer.tel}}</p>
<p>{{trainer.email}}</p>
</div>

我该如何解决？

编辑 - 所以我添加了完整的代码 [并删除了不相关的部分]。在我的项目中，我实际上试图链接一个模板 html 文档，但即使只使用“模板:”也不起作用？

Answer 1

我设法(以某种方式)解决了这个问题!

我将 Controller 代码更改为 app.controller 而不是使用 angular.module 来定义应用程序。由于某些原因，这在以前行不通，现在行得通了，我现在正在努力将其成功集成到我的实际项目中。

app.controller('MainController', ['$scope', function($scope) {
$scope.trainers = [ 
    { 
        name: 'Mike',
        email: 'mike@gym.com',
        tel: '07191941249',
        info: 'I am a gym instructor',
        quote: 'Inspirational Quote'
    }, ... ]
}]);