Question

我是angular.js的新手，仍然在努力捕捉最佳做法。在这种特殊情况下，我不确定动态添加和删除事件处理程序的角度方式是什么。

我创建了一个模仿我的问题的简化示例。在此示例中，用户可以从列表中的一个项目中进行选择。要选择项目，用户单击将显示列表的按钮。单击列表，将更改选择并列出隐藏列表。

但是，我现在要做的是让用户点击页面上的任意位置来隐藏列表。使用jQuery方法，我会在click或body上添加document事件处理程序，它将更改视图状态并隐藏弹出列表。

我已经使用这种方法在jsfiddle上创建了一个示例。我的问题是：这是angular.js中的好习惯吗？感觉有点ha ..

此外，请注意我不希望文档所有上有一个事件处理程序，只有当列表显示时才会显示。

Answer 1

使用angular.js guide中描述的实践，我创建了应该处理show / hide事件的指令。

.directive('toggleListDisplay', function($document) {
    return function(scope, element, attr) {
        var hideList = function (event) {
            scope.listDisplayed = false;
            $document.off('click', hideList);
            scope.$apply();
        };

        element.on('click', function(event) {
            event.stopPropagation();
            scope.listDisplayed = !scope.listDisplayed;
            if (scope.listDisplayed) {
                $document.on('click', hideList);
            } else {
                $document.off('click', hideList);
            }
            scope.$apply();
        });
    };
});

该指令将在元素上添加click事件处理程序，并将开始查找文档上的单击，直到显示列表。当它不再显示时，它将停止在文档上观看click事件。

可以在jsfiddle上找到工作示例。

在angular.js中动态添加和删除事件

1 个答案: