From where is a ngMessages directive in angular initiated, and can I initiate it manually?

Question

I am using ngMessages for form validation. I am facing the problem is that my html is creating dynamically by javascript and angular.message.js is loading before that. So I want to trigger ngMessage when all the dynamic HTML elements gets created.

This sounds like your approach is all wrong. There is almost never a reason to go outside angular to generate DOM elements, and when you do, it should be isolated to a directive which can be compiled into angular. Without a solid example of what you are trying to do and why you have to go outside angular, there isn't a solution to the situation you are describing. — Claies, Oct 12 '15 at 14:42
aside from that, your wording suggests a misunderstanding of how angular operates. Angular *is* JavaScript, so saying that you are creating html "dynamically by javascript" is a smell that you just aren't aware of how to have angular help you with the task. — Claies, Oct 12 '15 at 14:46
I am making a formbuilder in which HTML is generated by javascript dynamically. Whenever a user drag and drop a element. I am saving that html elements in JSON format and rendering it as a HTML using angular sanitizer. I tried to figure out the error and I probably figured it out that my ngmessages module gets loaded first and ngsanitize rendered later. — Arun Arya, Oct 13 '15 at 05:56
Here is an example of the situation http://stackoverflow.com/questions/33077627/ngmessages-module-is-not-working-properly?noredirect=1#comment53973799_33077627 — Arun Arya, Oct 13 '15 at 06:15
this ***Will not work***. You **cannot** bind angular directives to elements which are being added by `ng-bind-html` *after* the compile phase is already complete, unless you can fire `$compile` again, and in many cases this causes circular references. at a bare minimum, you would really need a *very solid* understanding of the angular phases before attempting this complex logic. — Claies, Oct 13 '15 at 06:26
do I need to use some other directive instead of using ng-bind-html ? Suggest me something to solve this problem as I am new in Angular js. — Arun Arya, Oct 13 '15 at 06:35
as I have already mentioned here, and as someone else mentioned in your other post, the approach you are using here *is not the angular way*. In angular, manipulating the DOM in this fashion should only be done as a last resort, and you should favor `ng-if`, `ng-include`, etc. instead. — Claies, Oct 13 '15 at 06:36
no, saving html in variables is how you might do this in other frameworks, but in angular it's a very bad practice. If you *really* want to save HTML in variables, you might find something like React.js more appropriate. Use the right tool for the job, whenever you can... — Claies, Oct 13 '15 at 06:39
bottom line, angular isn't the right tool for this task. It's like using a screwdriver on a nail. — Claies, Oct 13 '15 at 06:41
based on what you have presented so far, I don't see how angular can help you. angular expects you to treat data as data and HTML as HTML. the `ng-bind-html` is great for small things like HTML in a comments box, but it's not meant for widespread application logic. There is a difference between parsing HTML a user might provide and parsing HTML for DOM Manipulation, and there are just other frameworks more suited to that style of programming. — Claies, Oct 13 '15 at 07:05
Would you suggest other framework to achieve this style of programming OR in Angular what approach do I use to achieve this task. — Arun Arya, Oct 13 '15 at 07:13

score 0 · Answer 1 · edited May 23 '17 at 10:29

A ngMessages directive is initialized by the change in a form, $rootScope, or $scope object that is used in the data binding. The ngMessage directive is used to bind to a parent node, and each ngMessages directive is used to bind to a specific child whose value is true or false.

Use the following process:

A filter which injects the templateCache
A condition in the filter which adds the generated HTML template string and its ID to the templateCache
A condition in the filter which sets value of the key specified by a ngMessages directive to true

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.js"></script>

<script>
  angular.module('foo', ['ngMessages']);
</script>

<script>
function bop(model, view)
 {
 var i = 0, len = 100000, buz = "";
 
 for (i; i < len; i++)
   {
   buz = buz.concat(i);
   }
  
 bop.cache.put('listContent', buz);
 view.loaded = true;
   
 return model;
 }

 function baz($templateCache)
   {
   bop.cache = $templateCache;
   
   return bop;
   }

 baz.$inject = ['$templateCache','$rootScope'];

 angular.module('foo').filter('baz', baz);
</script>

<div ng-app="foo">
  <form name="myForm">
  <label>Check Me<input type="checkbox" ng-model="$root['required']"></label>
  <div ng-include="'listContent' | baz:myForm"></div>
  <div ng-messages="$root" style="color:green" role="alert">
    <div ng-message="required"></div>
  </div>
  <div ng-messages="myForm">
    <div ng-message="loaded" style="color:blue">Loaded</div>
  </div>
    
</div>

References

From where is a ngMessages directive in angular initiated, and can I initiate it manually?

1 Answers1