(18) Angularjs module Bootstrap, dynamically register the new controller

In angular we typically register the relationship between the Controller and the DOM before calling bootstrap to load the angular module. The controller that is registered on the DOM is automatically called.

But sometimes we need to dynamically add controllers, such as our project 1 pages are composed of a variety of controls, such as buttons, text boxes and so on is a control we encapsulate, each control has its own scope, which means that each control has its own controller. Finally, each control is parsed into HTML, probably the following way. Both the id attribute and the Ng-controller are dynamically generated.
<!--textarea control--><div dftype= "Nf.mspl.form.dataField.MTextArea" id= "nf49" ng-controller= "Nf49_ctrl" > </div><!--textinput control--><div dftype= "Nf.mspl.form.dataField.MTextInput" id= "Nf50" ng-controller= " Nf50_ctrl "></div>

The JS code for each control is probably as follows, and you can see that each control will have its own controller and scope. 
Nf.mspl.form.dataField.MTextArea = function (ID) {//will eventually call Angular register Controllerthis.ngcontroller (ID, function ($scope) { });} $.extend (Nf.mspl.form.dataField.MTextArea, nf.basecomponent, {});

 Obviously some controls need to be loaded (initialized) after the page is ready, but some controls may be loaded after the page is ready. Each page of our project is a ANGULARJS module. This requires that we be able to dynamically register and invoke the new controller after the page is ready. 
The above code, each time we click on the dynamic button, will insert a new div in the page and invoke the DOM associated angular controller. In other words, the above code realizes the target of dynamic registration controller. 


 
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
 
(18) Angularjs module Bootstrap, dynamically register the new controller