将元素环绕在主元素的 children 周围。 JQLite

Question

我正在使用 angular 和 JQLite。我有一个带有属性指令的元素 <md-button my-attr>MyText<md-icon>close</md-icon>。

在我的 attr 指令中，我想将 <div layout=row flex></div> 包裹在 <md-button> children 周围。

我使用了 wrap(), children().wrap()，我尝试用包装的 contents() 替换 contents()。我一直遇到的问题是：

<md-button my-attr><div layout=row flex>MyText</div><div layout=row flex><md-icon>close</md-icon></div></md-button>

我需要 1 div 包裹它们。

<md-button><div layout=row flex>MyText<md-icon>close</md-icon></div></md-button>

// $元素是 // 我尝试了几种方法，这是我最后尝试的方法。

        var content = $element.children().wrap('<div layout=row flex></div>');
        $element.empty();
        $element.append(content);

澄清一下。

<md-button> 是 $element。我想将 $element 的 children 包装在一个 div 中。所以 <md-button><child/><child/><child/></md-button> 变成 <md-button><div><child/><child/><child/></div></md-button>

Answer 1

directive('myDirective',[function(){
  return{
    restrict:'A',
    scope:{},
    link:function(scope,element,attr){
      element.wrap('<div class=".outer"></div>');
    }
  };
}]);

这将使用具有 class .outer 的 div 包装您的元素。像这样使用 <div my-directive>Element</div>

Answer 2

       var content = "<div layout=row flex>" + $element.html() + "</div>";
        $element.empty();
        $element.append(content);

能够从： #1

Answer 3

如果你有

<md-button>
  <child/>
  <child/>
  <child/>
</md-button>

你想要

<md-button>
  <div>
    <child/>
    <child/>
    <child/>
  </div>
</md-button>

那就试试这个

element.html(angular.element('<div></div>').html(element.contents()));

将元素环绕在主元素的 children 周围。 JQLite

Wrap element around children of main element. JQLite

angularjs

jqlite