AngularJS - jQuery "find" ex.
http://stackoverflow.com/questions/21466595/angularjs-add-simple-jquery-event-listener
HTML
<div ng-app="myApp">
<div ng-controller="MyCtrl"="">
<form-tracker>
<input name="q" type="text" placeholder="search" value tabindex="1" autocomplete="on" maxlength="240">
<input type="hidden" name="_id_" value="21466595">
<input type="hidden" id="post-id" value="21466595">
<textarea id="wmd-input" class="wmd-input processed" name="post-text" cols="92" rows="15" tabindex="101" data-min-length></textarea>
<input id="communitymode" name="communitymode" type="checkbox">
<input id="fkey" name="fkey" type="hidden" value="bd367278c7c3fab3f52a2b1f5429e342">
<input id="author" name="author" type="text">
<input id="submit-button" type="submit" value="Post Your Answer" tabindex="110">
</form-tracker>
</div>
</div>
CSS
</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/4.1.6/css/foundation.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> <style>
JavaScript
//Include angular-ui dependency in resources on the side and as 'ui'
angular.module('myApp', [])
.controller("MyCtrl", function ($scope) {})
.directive('formTracker', function ($timeout) {
return {
restrict: 'E',
link: function postLink(scope, element, attrs) {
element.on('blur', ':input', function () {
console.log(this);
});
// Timeout added for display purpose only
$timeout(function(){
element.append('<br><span>Element added after DOM has finished rendering</span><br><input id="dynamic-element" name="dynamic-elemen" type="text">');
}, 3000);
}
};
});