Having some issues with my angular directive. The expected outcome of this application is to display Personal Trainer profiles from an array in the main controller, using an angular directive and html template. I cannot seem to figure out why this doesn't work, code snippets are copied below. Console shows no errors and I can parse data binding from the trainers array manually but I want the template to display this...
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: '[email protected]',
tel: '07191941249',
info: 'I am a gym instructor',
quote: 'Inspirational Quote'
}, ... ]
}]);
app-info directive:
app.directive('appInfo', function() {
return {
restrict: 'E',
scope: {},
templateUrl: 'js/directives/appInfo.html'
};
});
app-info directive template:
<div>
<h3>{{trainer.name}}</h3>
<p>{{trainer.tel}}</p>
<p>{{trainer.email}}</p>
</div>
How can I resolve this?
Edit - So I added the code in its entirety [and I removed irrelevant sections]. In my project I am actually trying to link a template html document, but even just using 'template:' doesn't work?
I managed to solve this (somehow)!
I changed the controllers code to say app.controller instead of using angular.module to define the application. For some reason where this did not work before, now works and I am now working on integrating this into my actual project successfully.
app.controller('MainController', ['$scope', function($scope) {
$scope.trainers = [
{
name: 'Mike',
email: '[email protected]',
tel: '07191941249',
info: 'I am a gym instructor',
quote: 'Inspirational Quote'
}, ... ]
}]);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With