Tengo un HTML parcial que también estoy tratando de vincular datos AJAX. Por alguna razón, parece que debo poner la llamada de servicio AJAX dentro de la función de enlace de la directiva. No puedo simplemente ponerlo en el controlador; Lo hago en la directiva así:
link: function(scope){ MyService.getData().then(function(res){ scope.myData = res.data; }, function(res){ throw new Error('Error getting data'); }); } En primer lugar, tengo curiosidad por saber por qué no puedo hacer esto en mi controlador. Pero también, hay cierta manipulación que quiero hacer con los datos una vez que los obtenga. ¿Es necesario que todo eso suceda en la función vinculada? ¿En el controlador que $scope.myData no funcionará porque aún no está definido? ¿Puedo usar mis datos AJAX en mi controlador de alguna manera sin tener que hacer mi lógica en un archivo vinculado?
La tarea se puede hacer de varias maneras, pero la cuestión es cuál es la mejor práctica. En primer lugar, si tiene una directiva con parcial y desea vincularla, puede hacerlo en el controlador de la directiva.
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); }); } }; });Debe tener controladores THIN y servicios THICK cuando trabaje con AngularJS ... si tiene que manipular datos. Hágalo en el servicio y devuelva dicha forma de datos al controlador que se puede asignar directamente al controlador. Esa es la mejor práctica. Es decir, a su servicio. Hacer esto
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 }; });Espero que esto ayude.
Algunas de las fuentes en línea que podrían ayudar: https://scotch.io/tutorials/making-skinny-angularjs-controllers https://teamgaslight.com/blog/4-lessons-learned-doing-angular-on-rails
¿Cómo lo estás poniendo en tu controlador? Tengo una función en mi controlador a la que llamo a través de ng-init para cargar mis datos. Ejemplo basado en su fragmento:
.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'); }); } }Luego, en mi parcial, en una de las etiquetas HTML que tengo:
<div ng-init="initData()"></div>Simplemente agregue ng-init a una de sus etiquetas HTML para enviar la llamada. No estoy seguro de si es la forma correcta, pero funciona para mis escenarios y también debería funcionar para los tuyos.
Obviamente, hay varias formas de lograr esto; algunos pueden ser mejores que otros dependiendo de sus necesidades. Sugiero pensar más en los datos que obtiene del servicio y a dónde pertenecen.
De cualquier manera, probablemente debería usar (3) arriba de todos modos para su(s) servicio(s). Solo tenga en cuenta las trampas cuando se trata de un caché local. Espero que esto ayude.
EDITAR: si está buscando ejemplos de codificación, hágamelo saber: su pregunta parecía más sobre "cuáles son mis opciones" y no específicamente sobre los detalles de implementación técnica.
¡Salud!