AngularJS: directivas y scope

Tengo una pregunta simple que creo que tiene una solución bastante simple, pero de alguna manera me la estoy perdiendo.

Estoy configurando una directiva simple para mi aplicación. Dejo la propiedad de ámbito establecida en el valor predeterminado, “falso”, porque quiero que comparta el ámbito de mi controlador.

El problema es que parece que no puedo acceder a ese scope.

En mi función de enlace, puedo hacer:

console.dir(scope) 

y puedo ver la propiedad que busco (“páginas”) en el objeto de scope.

Si bash hacer:

 console.dir(scope.pages) 

sin embargo, vuelve como indefinido.

¿Qué me estoy perdiendo?

Gracias por adelantado.

 MyDirectives.directive("mdPagination", function(){ return { templateURL: "/templates/pagination.html", replace: true, restrict: 'A', scope: false, //default link: function(scope, element, attrs){ console.log('in linking function'); console.dir(scope); console.dir(element); console.dir(attrs); console.dir(scope.pages); } } }); 

La plantilla:

  

El controlador:

 App.controller('MachinesListCtrl', function ($scope, $routeParams, $location, MachineServices, CustomerServices) { var page = ($routeParams.page ? $routeParams.page : 1); //if we are getting all machines based on their customer id. if($routeParams.customerID){ MachineServices.getByCustomerId($routeParams.customerID).then(function (data) { _.each(data.results, function (machine, index, list) { CustomerServices.get(machine.customer_id).then(function(data){ machine.CustomerData = data.results; }); }); $scope.Machines = data.results; $scope.pages = data.pages; }); } //otherwise we just want the regular list of machines. else{ MachineServices.query(page).then(function (data) { _.each(data.results, function (machine, index, list) { CustomerServices.get(machine.customer_id).then(function(data){ machine.CustomerData = data.results; }); }); $scope.Machines = data.results; $scope.pages = data.pages; }); } }); 

El problema en su código es: MachineServices.getByCustomerId y MachineServices.query son asíncronos . Cuando llama a estas funciones, los datos del servidor aún no llegan y estas líneas

  $scope.Machines = data.results; $scope.pages = data.pages; 

No se llaman todavía .

El scope en su función de enlace está vinculado al scope del padre. Pero cuando se llama a la función de link , el scope.pages de los padres aún no está definido (debido a asyn)

Cuando trabajamos con enlace de datos angulares, deberíamos ser pasivos , solo escuchar los cambios y reactjsr en consecuencia (use $ watch, por ejemplo), porque nuestro código no sabe y no debería saber cuándo la propiedad vinculada tiene valor o su valor actualizado. Let angular notify us the changes

Parece que está usando recursos de $ angulares para sus servicios de máquina, ¿verdad? Eso crea un objeto o una matriz vacía para sus resultados a los que puede enlazar inmediatamente y que luego se llenan con resultados cuando la llamada se completa de forma asíncrona. Cuando el link es llamado por angular, aún no estará poblado con datos.

Primero agregue el registro a su query y getByCustomerId llamadas a getByCustomerId para asegurarse de que estén obteniendo los valores y configurando las propiedades en el scope correctamente. Agregue {{pages|json}} en algún lugar de su plantilla para ver el JSON de las páginas a medida que se modifica. Si ve eso, entonces puede ver esa propiedad en su directiva si necesita hacer algo especial cuando cambie:

 MyDirectives.directive("mdPagination", function(){ return { templateURL: "/templates/pagination.html", replace: true, restrict: 'A', scope: false, //default link: function(scope, element, attrs){ console.log('in linking function'); console.dir(scope); console.dir(element); console.dir(attrs); console.dir(scope.pages); // watch pages for changes scope.$watch('pages', function(value) { console.log("pages now has this value:"); console.dir(scope.pages); }); } } }); 

Intente inyectar el scope en su directiva.

 MyDirectives.directive("mdPagination", function($scope){... 

Aquí está el código que trabaja con Ng 1.2:

http://jsfiddle.net/roadprophet/PfEaz/

 MyDirectives.directive("mdPagination", function(){ console.log('BLAH'); return { template: "

BLAH!

", replace: true, restrict: 'A', scope: false, //default link: function(scope, element, attrs){ console.log('in linking function'); console.dir(scope); console.dir(element); console.dir(attrs); console.dir(scope['pages']); } } });

Observe que estoy inyectando $ scope en el controlador.

Intereting Posts