呼叫服務方法

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/