呼叫服务方法

Question

比方说，我有一个指令：

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

定义为：

尽管我的努力，我不明白如何完成两个任务：

1. 如何访问内部图像源路径？
2. 如何通过此路径服务MyService？ （认为​​灯箱包装的）与解

更新：

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. 您可以通过它绑定到你的控制器范围或使用属性的链接方法访问源路径。

2. 您无法从模板访问服务。您应该将您的服务注入到控制器中，并在$ scope中定义一个函数以从模板调用。

检查下面的指令：

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

您可以了解更多关于隔离范围在这里的指令： https://umur.io/angularjs-directives-using-isolated-scope-with-attributes/