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

发布时间：2020-12-17 08:46:22 所属栏目：安全来源：网络整理

导读：假设我有一个指令： 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" }})

假设我有一个指令：

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

>您可以通过将源路径绑定到控制器作用域或使用属性的链接方法来访问源路径.
>您无法从模板访问服务.您应该将服务注入控制器并在$scope中定义一个函数以从模板中调用.

检查以下指令：

app.directive("component",function() {
    return {
        scope: {
          ngSrc: "@",//Text Binding
        },controller: function($scope,MyService) {
           $scope.doThings = function() {
               MyService.doThings();
           }
        },template: "<a href='{{ng-src}}' ng-click='doThings' ng-transclude></a>"
    }
});

您可以在此处了解有关具有隔离范围的指令的更多信息
https://umur.io/angularjs-directives-using-isolated-scope-with-attributes/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!