你的位置:首页 > Java教程

[Java教程]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 ></div></script><script id="red" type="text/ng-template">  <div ></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。