Angular js+原生JS实现在某div上添加元素

假设已经存在一个div，想在如下div上添加一个小图标，angular js+原生js配合，可实现，操作如下：

• html部分

 <div class="mapNew" id="mapNew">
 </div>

• js部分

这是索要添加的html元素，在此举例子为一个小图标，可以定义该图标的样式，注册该图标的相应鼠标事件

var html="<img id='newImg' class='demo-item' src='../online.png' style='position:absolute;width: 38px;height: 47px;' ng-mouseenter='cameraInfo($event)' ng-mouseleave='nocameraInfo()'/>";

angular.element是angular js对DOM的操作，AngularJs是不直接操作DOM的，但是在平时的开发当中，我们有的时候还是需要操作一些DOM，并且AngularJs是不建议和JQuery同时使用，所以AngularJs给我们也提供了一些操作DOM的方法———Jqlite。angualr.element就将DOM元素或者HTML字符串包装成一个jQuery元素。
【注】jqLite中，通过angular.element(param)获得angular的元素。其功能与Jquery中的$()类似，但是存在一定的区别，$()里面是通过各种选择器选择到元素；但是angular.element方法的参数只有两种，一种是Dom元素，一种是类似html元素的字符串。

var template=angular.element(html);

$compile(template)($scope)是为了将编译好的dom对象(已封装为jqlite对象)传入scope。通过$compile服务可以编译html字符串或dom对象或jqLite对象，然后得到一个编译函数，再传入$scope，就会在当前作用域进行编译，返回编译好的jqLite对象，这时就可以直接添加到文档中了（也可以先添加到文档再编译）。 即：angular.element(document.getElementById(“mapNew”)).append(mobileDialogElement);
编译的实质其实就是对dom对象解析，使dom对象与scope进行耦合，通过绑定可以实现数据的更新。

var mobileDialogElement = $compile(template)($scope);
angular.element(document.getElementById("mapNew")).append(mobileDialogElement);

以上即可实现在id为"mapNew"的div上添加图标onlin.png。