Question

我按以下方式设置了我的HTML：

<div>
    <a href="" ng-click="$scope.show_menu = !$scope.show_menu">Options</a>

    <div class="options_box" ng-show="$scope.show_menu">
        <button>Option1</button>
        ...
    </div>
</div>

这是我的AngularJS代码：

myApp.controller('myController', 
    ['$scope', '$http', '$routeParams', function($scope, $http, $routeParams) {

    $scope.show_menu = false;
    $scope.$window.onclick = function(){
        $scope.show_menu = false;
        $scope.apply();
    };

    ...

} ]);

页面加载时，我收到以下错误：

Cannot set property 'onclick' of undefined

如果我删除了$window.onclick位代码，则错误消失，单击Options按钮会成功打开/关闭选项弹出窗口。当单击弹出菜单外的任何区域时，确保隐藏菜单的正确方法是什么？

Answer 1

$window不是范围内的属性。 AngularJS $window documentation说$window是一个全局对象。 Vaidik在将$window引入控制器的方法中是正确的，所以在完成此操作后，您可以写$window.onclick...而不是$scope.$window。

我不确定这是你需要的答案。如果你点击菜单外的按钮，我会质疑它是否会起作用，因为按钮会处理点击阻止事件冒泡（传播）到窗口......

如果你必须点击隐藏菜单，那么也许你可以通过切换ng-show点击打开它的同一个按钮？

或者菜单可以在失去焦点时隐藏，即鼠标移动到菜单区域之外 - 通过向菜单元素添加ng-blur指令。

请参阅ngBlur documentation。

Answer 2

您需要$window这样：

myApp.controller('myController', 
    ['$scope', '$http', '$routeParams', '$window', function($scope, $http, $routeParams, $window) {

    $scope.show_menu = false;
    $scope.$window.onclick = function(){
        $scope.show_menu = false;
        $scope.apply();
    };

    ...

} ]);

当单击外部区域时，AngularJS尝试隐藏弹出菜单

2 个答案: