AngularJS：在我的指令中应用另一个指令

Question

我想创建一个A限制指令bg-image（对于button标签），该指令由另一个A限制指令替代。

所以，

<button other-attr="other-value" bg-image="'image'">Text</button> 

应该成为

<button other-attr="other-value" ng-style="{'background-image': 'url(\'image.png\');'}">Text</button> 

我怎样才能做到这一点？谢谢。

更新：我想申请指令，但不是像elem.css。

Answer 1

您可以使用链接功能的elem.css()和attr参数让你达到了，没必要使用ngStyle指令基础上，要包括在css性能。

例如

.directive('bgImage', function() { 
    return function(scope, elem, attr) { 
    elem.css('background-image', 'url(' + attr.bgImage + ')'); 
    }; 
}); 

UPDATE：

考虑到你上面的例子中也可以使用ngStyle并有$编译服务与ngStyle指令一起重新编译元素：

例如

.directive('bgImage', function($compile) { 
    return function(scope, elem, attr) { 
    elem.attr('ng-style', "{'background-image': url(" + attr.bgImage + ")}"); 
    elem.removeAttr('bg-image'); 
    $compile(elem)(scope); 
    }; 
}); 

在编译之前删除bgImage指令可防止无限编译过程。

新更新：

HTML

<button bg-image="my-default-image.png" bg-image-hover="my-hover-image.png"></button> 

JAVASCRIPT

.directive('bgImage', function() { 
    return function(scope, elem, attr) { 
    elem.css('background-image', 'url(' + attr.bgImage + ')'); 

    elem.on('mouseover', function() { 
    elem.css('background-image', 'url(' + attr.bgImageHover + ')'); 
    }); 

    elem.on('mouseout', function() { 
    elem.css('background-image', 'url(' + attr.bgImage + ')'); 
    }); 

    scope.$on('$destroy', function() { 
    elem.unbind('mouseover'); 
    elem.unbind('mouseout'); 
    }); 
    }; 
}); 

当你发现你可以做到这一点，而不在元素本身追加新的指令，你仍然可以以DRY方式实现添加行为。

注意：如果你创建一个指令中的事件，一定要清理它时，指令的范围是通过解除绑定它破坏了$destroy事件