angularjs - 将元素包裹在主元素的子元素周围。JQLite

Question

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

在我的 attr 指令中，我想包裹<div layout=row flex></div>孩子<md-button>们。

我用过wrap(), children().wrap()，我尝试用包装的内容（）替换内容（）。我一直遇到的问题是：

<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>

// $element 是 // 我尝试了几件事，这是我尝试的最后一件事。

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

澄清。

<md-button>是$元素。我想将 $element 的子元素包装在一个 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>');
    }
  };
}]);

这将使用具有类 .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()));