AngularJS 指令不显示模板答案

【问题标题】：AngularJS Directive not showing templatesAngularJS 指令不显示模板
【发布时间】：2015-09-18 13:50:20
【问题描述】：

我的角度指令有一些问题。此应用程序的预期结果是使用角度指令和 html 模板从主控制器中的数组显示私人教练配置文件。我似乎无法弄清楚为什么这不起作用，下面复制了代码 sn-ps。控制台没有显示错误，我可以手动解析来自 trainers 数组的数据绑定，但我希望模板显示这个...

HTML：

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

MainController.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 文档，但即使只使用 'template:' 也不起作用？

【问题讨论】：

发布更多代码，因为发布的 sn-p 很好。
什么不起作用？
发布更多代码。我在 JSFiddle 中检查了你的代码，它的工作原理 - jsfiddle.net/kd44t9s4/1
“培训师”的价值是什么？
我将在评论中回复，因为问题被搁置：您需要从 app-info 指令中删除行 scope: {} - 现在它使用隔离范围，它看不到trainer 变量。或者您可以将变量传递给隔离范围：scope: {trainer: "="} 并像这样使用：<app-info trainer="trainer"></app-info>

标签： javascript angularjs angularjs-directive

【解决方案1】：

我设法解决了这个问题（不知何故）！

我将控制器代码更改为 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'
    }, ... ]
}]);

【讨论】：

【解决方案2】：

尝试将指令更改为：

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

这应该会导致指令获取父作用域并使其在那里可以访问数据。

将空对象传递给作用域会为指令创建一个隔离作用域。

【讨论】：