As a newcomer to AngularJS, I have utilized a service to retrieve data from the backend and received it in the controller. Now, my task is to parse these values and dynamically generate elements in a directive. However, when attempting to do so, I am encountering an issue where the values in the controller are showing as undefined.
Here is a snippet of my code:
var app = angular.module('childAid', ["myDirectives"]);
app.controller('headerController', function($scope, headerFactory) {
debugger
headerFactory.getAllChallenges()
.then(function(data) {
$scope.challengeslist = data.header;
});
});
In the directive file:
var myDirectives = angular.module('myDirectives', []);
myDirectives.directive('headerPicker', function() {
return {
restrict: 'AE',
templateUrl: 'component/views/header.html',
link: function($scope, element, attributes) {
console.log('linking foo ' + $scope.challengeslist);
}
};
});
And here is how the service is set up:
(function() {angular.module('childAid').factory('headerFactory', headerFactory);
function headerFactory($http) {
function getAllChallenges() {
debugger
return $http
.get('resources/stubs/details_tree.json')
.then(complete)
.catch(failed);
}
function complete(response) {
debugger
return response.data;
}
function failed(error) {
console.error(error.statusText);
}
return {
getAllChallenges: getAllChallenges
};
}
headerFactory.$inject = ['$http']; })();
Finally, in the HTML file:
<div ng-app="childAid" ng-controller="headerController">
<div class="container">
<h2>Displaying Header</h2>
<header-picker></header-picker>
</div>
I'm uncertain about where I may be going wrong with this implementation. Any assistance or guidance would be greatly appreciated since I am still learning the ropes of AngularJS.