angularjs - 从指令模板调用服务方法

Question

假设我有一个 指令 :

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

定义为:

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

尽管我付出了所有努力，但我还是不明白如何完成两项任务:

如何访问内部图像源路径？

如何将此路径传递给服务 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

您可以通过将源路径绑定(bind)到 Controller 范围或使用属性从链接方法访问源路径。

您无法从模板访问服务。您应该将服务注入(inject) Controller 并在 $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/