Calling metodo di servizio da un modello direttiva

Question

Diciamo che ho una direttiva :

<component> 
    <img ng-src='{{something}}' /> 
</component> 

definito come:

Nonostante tutti i miei sforzi, non riesco a capire come eseguire due compiti :

1. Come accedere al percorso di origine dell'immagine interna?
2. Come posso passare questo percorso al servizio MyService? (Si pensi a un involucro lightbox)

Aggiornamento con la soluzione:

app.directive("component", function(LightboxService) { 
    return { 
     restrict: 'E', 
     transclude: true, 
     replace: true, 
     template: "<a href='' ng-click='lb()' ng-transclude></a>", 
     link: function (scope, element, attrs) { 
      scope.lb = function() { 
       var src = $(element).find("img").attr("src"); 
       LightboxService.show(src); 
      } 
     } 
    } 
}); 

Answer 1

1. è possibile accedere al percorso di origine o legandosi al tuo nell'ambito del controllore o da un metodo di collegamento mediante attributi .

2. Non è possibile accedere al servizio da un modello. È necessario inserire il servizio in un controller e definire una funzione in $ scope per chiamare dal modello.

Controllare la direttiva di seguito:

app.directive("component", function() { 
    return { 
     scope: { 
      ngSrc: "@", //Text Binding 
     }, 
     controller: function($scope, MyService) { 
      $scope.doThings = function() { 
       MyService.doThings(); 
      } 
     }, 
     restrict: 'E', 
     transclude: true, 
     template: "<a href='{{ng-src}}' ng-click='doThings' ng-transclude></a>" 
    } 
}); 

Si può imparare di più su direttive con ambito isolato qui: https://umur.io/angularjs-directives-using-isolated-scope-with-attributes/