I have a dropdown list that dynamically loads a directive. When I choose "option a" it loads "directive a", when I choose "option b" it loads "directive b". However when the second directive is loaded and the DOM is overwritten with the new one, angular still seems to be acting on the one that was just removed as well as the new one.
Here is a snippet from my code so you can see what is happening.
// change event on dropdown list
function onSelection(e, args) {
if (args) {
ctl.build(args.type || "integer");
}
}
/** build the relevant directive based on the type */
function build(type) {
type = type.toLowerCase();
var directive = "<rep-"+type+"-control args='filter.args'></rep-"+type+"-control>";
var control = $element.find("#control");
// only compile the new control so we don't duplicate ng events on the outer directive
control.html(directive);
$compile(control.contents())($scope);
}
This simply hooks in to the change event, and runs "build". Build takes a given argument (which is the value of the selected option) and loads a directive with the same name "<rep-option-control>". It loads it in to a specific DOM element, and compiles that element.
Directive A has an input of type "text" and Directive B has an input of type "number". If I load Directive B first, and then load Directive A and enter content in to the input (type='text') I get this error: https://docs.angularjs.org/error/ngModel/numfmt?p0=test which clearly states that I am trying to enter string content in to a number input.
This means that even though I run control.html(directive) and $compile it, the old directive is still active.
Does any one know how I might stop this?
