Javascript 在其他指令中重用角度指令

我希望延迟加载图像和iFrame（即，一旦元素在视口中，就设置src）。我有一个现有的角度指令

is visible

，当元素滚动到视图中时，该指令设置

is visible

属性。当指令可见时，如何从我的

set src中重用该指令

i、 例如，我希望此代码重用
是可见的
指令：

<img set-src-when-visible="http://example.com/img.png" />`
<iframe set-src-when-visible="http://example.com/" /> 

以下是一个工作示例：

缺点：我希望能够在仍然重用
可见时，仅指定
set src when visible
指令


不满意的方法2：
创建两个指令，一个用于iframe，一个用于img标记：

<iframe set-iframe-src-when-visible="url"></iframe>
<img set-img-src-when-visible="url" />

angular.forEach(['Iframe', 'Img'], function(tagName) {
    var directiveName = 'set' + tagName + 'SrcWhenVisible';
    myApp.directive(directiveName, function ($window) {
        return {
            restrict: 'A',
            template: '<' + tagName + ' is-visible></' + tagName + '>',
            replace: true,
            link: function ($scope, element, attrs) {
                var set = false;
                attrs.$observe('isVisible', function(value) {
                    if(value && !set) {
                        attrs.$set('src', $scope.$eval(attrs[directiveName]));
                        set = true;
                    }
                });
            }
        }
    });
});


angular.forEach（['Iframe'，'Img']，函数（标记名）{
var directiveName='set'+标记名+'srchwhenvisible'；
myApp.directive（directiveName，function（$window）{
返回{
限制：“A”，
模板：“”，
替换：正确，
链接：函数（$scope，element，attrs）{
var集=假；
属性$observe（'isVisible'，函数（值）{
if（值&&！集）{
attrs.$set（'src'，$scope.$eval（attrs[directiveName]）；
设置=真；
}
});
}
}
});
});

工作示例：

缺点：每个指令的名称不同，加上这与我用于声明和配置我的应用程序的方法不匹配。
根据我们的评论讨论，这里有一个链接函数，希望它能满足您的需要：

link: function ($scope, element, attrs) {
   $scope.src = attrs.setSrcWhenVisible;  // save attribute -- is $eval needed?
   var tagName = element[0].tagName;
   if(tagName == 'IMG') {
      var jqLiteWrappedElement = angular.element('<img is-visible></img>');
   } else {
      var jqLiteWrappedElement = angular.element('<iframe is-visible></iframe>');
   }
   element.replaceWith(jqLiteWrappedElement);
   $compile(jqLiteWrappedElement)($scope);
   var set = false;
   attrs.$observe('isVisible', function(value) {
      if(value && !set) {
         attrs.$set('src', $scope.src);
         set = true;
      }
   });
}

链接：函数（$scope，element，attrs）{
$scope.src=attrs.setsrchwhenvisible；//保存属性--是否需要$eval？
变量标记名=元素[0]。标记名；
如果（标记名==“IMG”）{
var jqlitewappedelement=angular.element（'
根据我们的评论讨论，这里有一个链接功能，希望它能满足您的需求：

link: function ($scope, element, attrs) {
   $scope.src = attrs.setSrcWhenVisible;  // save attribute -- is $eval needed?
   var tagName = element[0].tagName;
   if(tagName == 'IMG') {
      var jqLiteWrappedElement = angular.element('<img is-visible></img>');
   } else {
      var jqLiteWrappedElement = angular.element('<iframe is-visible></iframe>');
   }
   element.replaceWith(jqLiteWrappedElement);
   $compile(jqLiteWrappedElement)($scope);
   var set = false;
   attrs.$observe('isVisible', function(value) {
      if(value && !set) {
         attrs.$set('src', $scope.src);
         set = true;
      }
   });
}

链接：函数（$scope，element，attrs）{
$scope.src=attrs.setsrchwhenvisible；//保存属性--是否需要$eval？
变量标记名=元素[0]。标记名；
如果（标记名==“IMG”）{
var jqlitewappedelement=angular.element（'
我的理解是，
require
用于要求另一个控制器，因此您可能不需要在
setsrchwhenvisible
指令定义对象中指定该属性。如果您不想复制
isVisible
代码（当元素滚动到视图中时设置属性）在
setsrchwhenvisible
指令中，那么我认为除了将
is visible
属性添加到元素之外，您没有其他选择……否则元素如何获得此功能？谢谢，@Mark。一种方法是使用包含is visible指令的模板，但这只适用于单个ta每个指令都有g类型，因此我必须做两个指令，一个用于
img
标记，一个用于
iframe
，另外，@mark，'require'强制执行
可见时
与
set src可见时在同一元素上。感谢有关
require
的信息。（但我个人不会这样使用它，因为其他编码器可能会假设
setsrchwhenvisible
指令将使用
isVisible
控制器。）您应该能够将编译函数添加到示例FIDLE中，并动态确定要使用的标记类型。到目前为止，我最喜欢这种方法。@mark，我正在努力找出如何做到这一点。如果不创建一个全新的标记名，我无法更改模板的标记名，也无法在编译函数be中添加“可见”属性原因是angular确定了要编译的指令后，我的理解是，
require
用于要求另一个控制器，因此您可能不需要在
setsrchwhenvisible
指令定义对象中指定该属性。如果您不想复制
可见的
code（当元素滚动到视图中时设置属性）在
setsrchwhenvisible
指令中，那么我认为除了将
is visible
属性添加到元素之外，您没有其他选择……否则元素如何获得此功能？谢谢，@Mark。一种方法是使用包含is visible指令的模板，但这只适用于单个ta每个指令都有g类型，因此我必须做两个指令，一个用于
img
标记，一个用于
iframe
，另外，@mark，'require'强制执行
可见时
与
set src可见时在同一元素上。感谢有关
require
的信息。（但我个人不会这样使用它，因为其他编码器可能会假设
setsrchwhenvisible
指令将使用
isVisible
控制器。）您应该能够将编译函数添加到示例FIDLE中，并动态确定要使用的标记类型。到目前为止，我最喜欢这种方法。@mark，我正在努力找出如何做到这一点。如果不创建一个全新的标记名，我无法更改模板的标记名，也无法在编译函数be中添加“可见”属性原因是angular已确定要编译的指令