As a newcomer to Angular.js, I find myself in need of assistance with a minor issue. Sadly, the CMS that I am working within lacks a service and does not output JSON. This leaves me with no other choice but to extract my data from the DOM. While this may not be the optimal solution, it is the reality of my current situation.
Within the page, there exists a hidden div styled with CSS and containing an unordered list with the class of .people-data. In essence, this hidden element serves as my makeshift service :)
I suspect that I should encapsulate my jQuery logic for scraping data from the DOM within a 'directive,' but I am uncertain how to proceed. It feels inappropriate to have this jQuery code residing directly within the controller.
Perhaps, I might not even require jQuery to access this data... Could Angular perform such tasks?
var angularApp = angular.module('angularApp', []);
angularApp.controller('PeopleCtrl', ['$scope', function PeopleCtrl($scope) {
$scope.people = [];
// prefer not to include this within controller.. extracting data from DOM
// perhaps a directive?? where and how should it be implemented?
$('.people-data li').each(function(){
$scope.people.push({
name: $(this).find('.name').text(),
email: $(this).find('.email').text()
});
});
} ]);
For reference, you can view the Plunk here: http://plnkr.co/edit/kUqL9f?p=info