Question

我想创建一个A - restrict指令bg-image（用于button标记），用另一个A - restrict指令替换自己。

所以，

<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指令希望被收录。

e.g。

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

更新：

考虑上面的示例，您还可以使用ngStyle并使用$ compile服务与ngStyle指令一起重新编译元素：

e.g。

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

正如您所注意到的那样，您可以在不在元素本身中添加新指令的情况下执行此操作，您仍然可以以干燥的方式添加行为。

注意：如果您在指令中创建事件，请确保在指令范围被销毁时通过在$destroy事件中取消绑定来清除它

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

1 个答案: