Question

我正在尝试使用Angular捕获选定的现有DOM项目上的click事件：

(node tree on the left)

这是代码：

<!-- 
HTML template (section) - it's a django template, i kept the 
django template syntax as original, using '{{' and '}}', and for 
AngularJS templating's system '{$' and '$}'
-->
<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 a node...";
             $scope.getNodeTitle = function(event){
                 alert(event);
             }

        });
app.directive(
    "onNodeClick", function(selector, $parse){
        // connect the Angular context to the DOM events
        var linkFunction = function($scope, $element, $attrs){
            //get the scope expression, will be evaluated on
            // the scope when the document is clicked
            var scopeExpression = $attrs.onNodeClick;

            var invoker = $parse(scopeExpression);

            $(selector).on("click", function(event){
               $scope.$apply(
                   function(){
                       invoker(
                           $scope, { $event: event}
                       )
                   }
               );
            });
        }
        return( linkFunction );
    }
);

重新加载页面后，我在控制台中出现错误：

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

任何人都知道如何解决它？我只关注this guide如何使用AngularJS处理点击事件，但似乎对我不起作用。

非常感谢！路加

Answer 1

如果您只需捕获附加了on-node-click指令的元素的特定子元素的点击，您将在指令定义中将点击侦听器附加到该元素，并使用可选的{{ jQuery＆＃39; s .on()方法中的参数仅用于过滤所需的子元素。您根本不需要处理selector。

所以你的指令看起来像这样：

$document

这里是fiddle。

但是，如果您确实需要捕获文档节点上的单击事件（如该文章所述），则只需将.directive('onNodeClick', ['$parse', function ($parse) { return { restrict: 'A', link: function (scope, element, attrs) { var scopeExpresssion = attrs.onNodeClick, // gets string 'getNodeTitle($event)' from element attribute invoker = $parse(scopeExpresssion); // compile string into a function // listen for clicks on .node child elements element.on('click', '.node', function (e) { // wrap the function invocation in scope.$apply() so angular knows about it scope.$apply(function () { invoker(scope, { $event: e }); }); }); } }; }]);注入到您的指令中并将单击侦听器附加到该指针而不是元素你的指令已经开启。

在这种情况下，您的指令将如下所示：

$document

AngularJS - 处理现有DOM元素上的单击事件

1 个答案: