I have a HTML partial that I'm trying to bind AJAX data too. For some reason, it seems I must put the AJAX service call within the directive's link function. I cannot just put it in the controller; I do it in the directive like this:
link: function(scope){
MyService.getData().then(function(res){
scope.myData = res.data;
}, function(res){
throw new Error('Error getting data');
});
}
First of all, I'm curious why I cannot do this in my controller. But also, There is some manipulation I want to do to the data once I get it. Does that all need to happen in the linked function. In the controller looping over $scope.myData won't work because it isn't defined yet? Can I use my AJAX data in my controller somehow without having to do my logic in a linked file?
The task can be done in various ways but the question is that which practice is the best. First of all if you have a directive with partial and you want to bind to it, you can do it in the directive's controller
app.directive('myPartial', function() {
return {
restrict:'AE',
template:'<pre>[{{myData| json}}]</pre>',
scope:true,
link:function(scope, elem, attrs) {
/*avoid using model manipulation in link function as it is mostly used
for DOM manipulation such as angular.element(elem).addClass('myTemplateClass');*/
},
controller: function($scope,MyService){
MyService.getData().then(function(dataFromServer){
scope.myData = dataFromServer;
}, function(err){
throw new Error('Error getting data : ' + err);
});
}
};
});
You have to have THIN controllers and THICK services when working with AngularJS.. if you have to manipulate data. Do it in the service and return such form of data to controller which is directly assignable to the controller. That's the best practice. I.e. in your service. Do this
app.factory('MyService',function($http,$q){
var _modifyGetData = function(serverData){
// modify your data here...
// for example -> serverData.usersCount = serverData.users.length;
return serverData;
};
var getData = function(){
var dfd = $q.defer();
$http.get(/*Some url here*/).then(function(res){
var data = res.data;
// manipulate all your data using a function maybe
data = _modifyGetData(data);
dfd.resolve(data); //resolve the modified data
});
return dfd.promise;
}
return {
getData:getData
};
});
Hope this helps.
Some of the online sources that might help: https://scotch.io/tutorials/making-skinny-angularjs-controllers https://teamgaslight.com/blog/4-lessons-learned-doing-angular-on-rails
How're you putting it in your controller? I have a function in my controller that I call via ng-init, to load up my data. Example based on your snippet:
.controller('myCtrl', function ($scope, MyService) {
$scope.initData = function(){
MyService.getData().then(function(res){
$scope.myData = res.data;
}, function(res){
throw new Error('Error getting data');
});
}
}
Then in my partial, in one of the HTML tags I have:
<div ng-init="initData()"></div>
Just add the ng-init to one of your HTML tags to send the call. Not sure if it's the right way, but it works for my scenarios, and should work for yours too.
There are obviously several ways to accomplish this; some may be better than others depending on your needs. I suggest thinking more about the data that you are getting from the service and where it belongs.
Either way, you should probably use (3) above anyways for your service(s). Just be aware of gotchas when dealing with a local cache. Hope this helps.
EDIT: If you're looking for coding examples, please let me know -- your question seemed more about "what are my options" and not specifically about technical implementation details.
Cheers!