angularjs - escape - ng-class

Angularjs pasando objeto a directiva.

Question

El novato angular aquí. Estoy tratando de averiguar qué está mal al pasar objetos a directivas.

Aquí está mi directiva:

app.directive(''walkmap'', function() {
return {
restrict: ''A'',
transclude: true,
scope: { walks: ''=walkmap'' },
template: ''<div id="map_canvas"></div>'',
link: function(scope, element, attrs)
{
console.log(scope);
console.log(scope.walks);
}
};
});

Y esta es la plantilla donde llamo a la directiva:

<div walkmap="store.walks"></div>

store.walks es una matriz de objetos.

Cuando ejecuto esto, scope.walks registra como undefined mientras que el scope registra scope.walks como un alcance e incluso tiene un hijo con todos los datos que estoy buscando.

No estoy seguro de lo que estoy haciendo mal aquí porque este método exacto me ha funcionado anteriormente.

EDITAR:

He creado un plunker con todo el código requerido: http://plnkr.co/edit/uJCxrG

Como puede ver, el {{walks}} está disponible en el ámbito, pero necesito acceder a él en la función de enlace donde aún se está registrando como no definido.

Answer 1

Dado que está utilizando $resource para obtener sus datos, la función de enlace de la directiva se ejecuta antes de que estén disponibles (porque los resultados de $resource son asíncronos), por lo que la primera vez en la función de enlace scope.walks estará vacía / indefinida. Dado que su plantilla de directivas contiene {{}} s, Angular configura un $watch on walks , por lo que cuando el $resource los datos, se activa $watch y se actualiza la pantalla. Esto también explica por qué ve los datos de las caminatas en la consola: en el momento en que hace clic en el enlace para ampliar el alcance, los datos se completan.

Para resolver su problema, en su función de enlace $watch para saber cuándo están disponibles los datos:

scope.$watch(''walks'', function(walks) {
console.log(scope.walks, walks);
})

En su código de producción, simplemente evite que no esté definido:

scope.$watch(''walks'', function(walks) {
if(walks) { ... }
})

Actualización: si está utilizando una versión de Angular donde $resource respalda las promesas, vea también la respuesta de @sawe.

Answer 2

Otra solución sería agregar ControllerAs a la directiva mediante la cual puede acceder a las variables de la directiva.

app.directive(''walkmap'', function() {
return {
restrict: ''A'',
transclude: true,
controllerAs: ''dir'',
scope: { walks: ''=walkmap'' },
template: ''<div id="map_canvas"></div>'',
link: function(scope, element, attrs)
{
console.log(scope);
console.log(scope.walks);
}
};
});

Y luego, en su opinión, pase la variable utilizando la variable controllerAs .

<div walkmap="store.walks" ng-init="dir.store.walks"></div>

Answer 3

Tratar:

<div walk-map="{{store.walks}}"></div>
angular.module(''app'').directive(''walkMap'', function($parse) {
return {
link: function(scope, el, attrs) {
console.log($parse(attrs.walkMap)(scope));
}
}
});

Answer 4

su $ scope.store declarado no es visible desde el controlador ... lo declara dentro de una función ... así que solo es visible en el alcance de esa función, necesita declararlo afuera:

app.controller(''MainCtrl'', function($scope, $resource, ClientData) {
$scope.store=[]; // <- declared in the "javascript" controller scope
ClientData.get({}, function(clientData) {
self.original = clientData;
$scope.clientData = new ClientData(self.original);
var storeToGet = "150-001 KT";
angular.forEach(clientData.stores, function(store){
if(store.name == storeToGet ) {
$scope.store = store; //declared here it''s only visible inside the forEach
}
});
});
});

Answer 5

también puedes usar

scope.walks.$promise.then(function(walks) {
if(walks) {
console.log(walks);
}
});