angular $compile 编译html,AngularJS实现动态编译添加到dom中的方法

本文实例讲述了AngularJS实现动态编译添加到dom中的方法。分享给大家供大家参考，具体如下：

在使用angularjs 时，希望通过动态构建angular模版，再通过angular进行展示。

使用 方法如下：

var app=angular.module("app",[]);

app.controller('ctrl', ['$scope','$compile',function($scope,$compile){

$scope.userName='RAY';

$scope.test = function test(){

console.log('你好:' +$scope.userName);

}

//通过$compile动态编译html

var html="{{userName}}";

var template = angular.element(html);

var mobileDialogElement = $compile(template)($scope);

angular.element(document.body).append(mobileDialogElement);

}]);

var html="{{userName}}";

这种代码就是angular模版，通过angularjs的编译器进行编译，就能够访问到angular scope中的对象数据。

希望本文所述对大家AngularJS程序设计有所帮助。