javascript - AngularJS - handle click events on existing DOM elements -

i'm trying capture click event on selection of existing dom items using angular:

here's code:

<!--  html template (section) - it's django template, kept  django template syntax original, using '{{' , '}}', ,  angularjs templating's system '{$' , '$}' --> <fieldset class="module aligned">     <h2>document's sections</h2>      <div class="form-row document-nodes" ng-app="documentnodesapp">         <div style="width: 100%; min-height: 450px;"              ng-controller="nodecontroller" on-node-click="getnodetitle($event)">             <form id="changelist-form" action="" method="post" novalidate>{% csrf_token %}                 <div id="tree"                      data-url="{{ tree_json_url }}"                      data-save_state="{{ app_label }}_documentnode"                      data-auto_open="{{ tree_auto_open }}"                      data-autoescape="{{ autoescape }}"                 >                 </div>             </form>             <div id="node-container">                 {$node_title$}             </div>         </div>     </div> </fieldset>   /* documentnodeapp js code */  var app = angular.module('documentnodesapp', []);  app.config(function($interpolateprovider) {     $interpolateprovider.startsymbol('{$');     $interpolateprovider.endsymbol('$}'); });  var nodecontroller = app.controller(         'nodecontroller',         function($scope){              $scope.node_title = "click on node...";              $scope.getnodetitle = function(event){                  alert(event);              }          }); app.directive(     "onnodeclick", function(selector, $parse){         // connect angular context dom events         var linkfunction = function($scope, $element, $attrs){             //get scope expression, evaluated on             // scope when document clicked             var scopeexpression = $attrs.onnodeclick;              var invoker = $parse(scopeexpression);              $(selector).on("click", function(event){                $scope.$apply(                    function(){                        invoker(                            $scope, { $event: event}                        )                    }                );             });         }         return( linkfunction );     } ); 

after reloading page, have tis error in console:

error: [$injector:unpr] http://errors.angularjs.org/1.3.2/$injector/unpr?p0=selectorprovider%20%3c-%20selector%20%3c-%20onnodeclickdirective     @ error (native)     @ http://127.0.0.1:8050/sitestatic/js/angular.min.js:6:416     @ http://127.0.0.1:8050/sitestatic/js/angular.min.js:38:60     @ object.d [as get] (http://127.0.0.1:8050/sitestatic/js/angular.min.js:36:74)     @ http://127.0.0.1:8050/sitestatic/js/angular.min.js:38:132     @ d (http://127.0.0.1:8050/sitestatic/js/angular.min.js:36:74)     @ object.e [as invoke] (http://127.0.0.1:8050/sitestatic/js/angular.min.js:36:335)     @ http://127.0.0.1:8050/sitestatic/js/angular.min.js:47:393     @ r (http://127.0.0.1:8050/sitestatic/js/angular.min.js:7:302)     @ object.<anonymous> (http://127.0.0.1:8050/sitestatic/js/angular.min.js:47:360) angular.min.js:101 

anyone has idea of how solve it? followed this guide on how handle click events angularjs seems doens't work me.

many thanks! luke

if need capture clicks on specific child elements of element on-node-click directive attached to, would, in directive definition, attach click listener element, , use optional selector parameter in jquery's .on() method filter child elements want. don't need deal $document @ all.

so directive this:

.directive('onnodeclick', ['$parse', function ($parse) {       return {     restrict: 'a',     link: function (scope, element, attrs) {       var scopeexpresssion = attrs.onnodeclick, // gets string 'getnodetitle($event)' element attribute                       invoker = $parse(scopeexpresssion); // compile string function        // listen clicks on .node child elements       element.on('click', '.node', function (e) {         // wrap function invocation in scope.$apply() angular knows         scope.$apply(function () {           invoker(scope, { $event: e });         });       });     }   }; }]); 

here's fiddle.

if, however, need capture click events on document node article discusses, need inject $document directive , attach click listener instead of element directive on.

in case, directive this:

.directive('onnodeclick', ['$document', '$parse', function ($document, $parse) {       return {     restrict: 'a',     link: function (scope, element, attrs) {       var scopeexpresssion = attrs.onnodeclick, // gets string 'getnodetitle($event)' element attribute                       invoker = $parse(scopeexpresssion); // compile string function        // listen clicks on .node elements within document       $document.on('click', '.node', function (e) {         // wrap function invocation in scope.$apply() angular knows         scope.$apply(function () {           invoker(scope, { $event: e });         });       });     }   }; }]);