gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 11:05:33 25 4
gpt4 key购买 nike

假设我有一个 指令 :

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

    最佳答案

  • 您可以通过将源路径绑定(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/

    关于angularjs - 从指令模板调用服务方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25685788/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com