Question

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

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

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

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

我需要将两个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>是$元素。我想将$元素的子元素包装在一个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()));

围绕主要元素的儿童包裹元素。 JQLite

3 个答案: