Директива AngularJS, не показывающая шаблоны

Question

Имея некоторые проблемы с моей угловой директивой. Ожидаемым результатом этого приложения является отображение профилей личного тренера из массива в основном контроллере с использованием угловой директивы и html-шаблона. Я не могу понять, почему это не работает, фрагменты кода копируются ниже. Консоль не показывает никаких ошибок, и я могу разобрать привязки данных из массива тренеров вручную, но я хочу, чтобы шаблон для отображения этого ...

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 плачевными ctive template:

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

Как это разрешить?

Редактировать - поэтому я добавил код целиком [и удалил ненужные разделы]. В моем проекте я фактически пытаюсь связать HTML-документ шаблона, но даже с использованием «шаблона:» не работает?

Answer 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' 
    }, ... ] 
}]); 

Answer 2

Попробуйте изменить директиву:

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

Это должно вызвать директиву, чтобы получить родительский объем и сделать данные доступными для него там.

Передача пустого объекта в область видимости создает изолированную область действия для этой директивы.