Let me explain my situation. I am dynamically adding a block of code using JavaScript and binding it to my AngularJS scope. Everything seems to be working fine, except for one issue. There is a directive on a text box that works properly. However, the $watch function triggers when any other text box is changed for the first time, but not subsequently. Below is the code snippet:
$('.addNew').click(function(){
var uniqid = Date.now();
var html= '';
html += '<section class="newItem" id="'+uniqid+'">';
// Rest of the HTML code...
});
Here is the directive used in the code:
app.directive('costCheck',function($compile,$rootScope){
$rootScope.gName= "What did i buy?";
return{
restrict: 'A',
link: function(scope,element,attrs){
scope.$watch('cost',function(oldval,newval){alert(attrs.name);
if(attrs.name === 'cost'){
alert(oldval+'--'+newval);
}
});
}
}
});
The problem lies in why the $watch function triggers for other text boxes as well. Any suggestions?