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);
    }
  });