正文
AngularJS中写一个包裹HTML元素的directive
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
有这样的一个场景，这里有一个表单：
<form role="form">
...
</form>
我们希望在form的外层动态包裹上一层。
有可能是这样：
<div id="well">
<form role="form">
...
</form>
</div>
也有可能是这样：
<div id="red">
<form role="form">
...
</form>
</div>
动态的div放在那里呢？
--放在<script id="well" type="text/ng-template"></script>和<script id="red" type="text/ng-template"></script>里面，就像如下：
<script id="well" type="text/ng-template">
<div class="well"></div>
</script> <script id="red" type="text/ng-template">
<div style="color:red"></div>
</script>
动态div如何包裹到form上呢？
--通过<form role="form" wrap-with="red">或<form role="well" wrap-with="red">
所以我们要写一个名称为wrapWith的directive.
var app = angular.module("app",[]);
app.controller("AppCtrl", function(){
var app = this;
app.people = [
{"firstName":"", "lastName":""},
...
];
});
app.directive("wrapWith", function($templateCache){
return {
transclude: 'element',
link: function(scope, element, attrs, ctrl, transclude){
//获取模版内容
var template = $templateCache.get(attrs.wrapWith);
//把模版内容转换成angular元素
var templateElement = angular.element(template);
transclude(scope, function(clone){
//clone,在这里是表单form
element.after(templateElement.append(clone));
})
}
}
})
以上，通过$templateCache可以获取到<script id="well" type="text/ng-template"></script>中的内容，然后通过angular.element转换成angular元素，最后使用link函数的transclude把form追加到模版后面。另外，transclude的属性值要设置成element。
