标签：controllerprovider compile angular动态注册controlle
在angular中我们一般是先注册控制器和dom之间的关系，然后才调用bootstrap加载angular模块。这样dom上注册的控制器就会被自动调用。
<html>
<head>
<script src="jquery-1.11.1.min.js"></script>
<script src="angular-1.2.25.js"></script>
<script>
// 创建一个模块,并记录$controllerProvider
var myModule = angular.module('myModule', []);
myModule.controller("div1_ctrl", controller1);
function controller1($scope)
{
console.log("controller1 executed.");
}
// 页面加载完成后,再加载模块
$(function(){
angular.bootstrap($("#div1")[0], ["myModule"]);
})
</script>
</head>
<body>
<div id="div1" ng-controller="div1_ctrl">
<input type="button" value="dynamic"></input>
</div>
</body>
</html>
但是有的时候我们需要动态增加controller，比如我们的项目中1个页面是由各种控件组成的，比如按钮、文本框等都是我们封装的一个控件，每个控件都有自己的scope，也就是说每个控件都有自己的controller。最终每个控件被解析成html的时候，大概是下面这个样子。id属性和ng-controller都是动态生成的。
<!--TextArea控件--> <div dftype="Nf.mspl.form.dataField.MTextArea" id="nf49" ng-controller="nf49_ctrl"> </div> <!--TextInput控件--> <div dftype="Nf.mspl.form.dataField.MTextInput" id="nf50" ng-controller="nf50_ctrl"> </div>
Nf.mspl.form.dataField.MTextArea = function(id) {
//最终会调用angular注册controller
this.ngController(id, function($scope) {
});
}
$.extend(Nf.mspl.form.dataField.MTextArea, Nf.BaseComponent, {});
<html>
<head>
<script src="jquery-1.11.1.min.js"></script>
<script src="angular-1.2.25.js"></script>
<script>
var isPageReady = false;
// 模块的$controllerProvider,用来动态注册controller
var controllerProvider = null;
// 创建一个模块,并记录$controllerProvider
var myModule = angular.module('myModule', [], function($controllerProvider) {
controllerProvider = $controllerProvider;
});
function controller1($scope)
{
console.log("controller1 executed.");
$scope.add = function(){
$("#div1").append("<div id='div2'>dynamicly add</div>");
registerController("div2", "div1_ctr2", function($scope){
console.log("controller2 executed.");
});
}
}
// 页面加载完成后,再加载模块
$(function(){
registerController("div1", "div1_ctrl", controller1);
angular.bootstrap($("#div1")[0], ["myModule"]);
isPageReady = true;
})
function registerController(elementId, controllerName, func)
{
$("#"+elementId).attr("ng-controller",controllerName);
if(isPageReady == false)
{
myModule.controller(controllerName, func);
}
else
{
controllerProvider.register(controllerName, func);
$("#"+elementId).injector().invoke(function($compile, $rootScope) {
$compile($("#"+elementId))($rootScope);
});
}
}
</script>
</head>
<body>
<div id="div1">
<input type="button" value="dynamic" ng-click="add();"></input>
</div>
</body>
</html>上面这段代码，我们每次点击dynamic按钮的时候，都会在页面中插入一个新的div，并调用该dom关联的angular控制器。也就是说上面这段代码实现了动态注册controller的目标。
版权声明：本文为博主原创文章，未经博主允许不得转载。
(十八)angularjs中模块bootstrap后,动态注册新的controller
标签：controllerprovider compile angular动态注册controlle
原文地址：http://blog.csdn.net/aitangyong/article/details/48135961
