假设我有一个指令：
<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中定义一个函数以从模板中调用.
>您无法从模板访问服务.您应该将服务注入控制器并在$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/
