从指令模板中调用服务方法

Question

假设我有一个指令：directive：

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

尽管我很努力，但我仍然不了解如何完成以下两个任务：

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

- Cranio

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/

- Prasad K - Google

---

我已经尝试了使用链接方法，它可以工作；如果我在内部范围中定义一个调用服务方法的方法，也可以工作 :) 似乎这是正确的方法，谢谢！（我已经在帖子中包含了我的解决方案） - Cranio