服务变量未被监视

Question

我有这样的服务

function() {
    this.show = false;

    this.toggle = function() {
        this.show = !this.show;
    }
}

并且菜单中有一个ng-show，显示了MenuService.show

这完美无缺，但是我正在尝试这样做，以便当用户在主页面中点击它时显示为false，从而隐藏菜单。我有这个代码

angular.element(document.getElementById("pages")).bind("click", function() {
    $scope.menuService.show = false;
});

但ng-show似乎没有注意到节目现在是假的并且继续显示。我做错了什么？

Answer 1

如果您绑定Angular之外的事件（使用bind），则需要$apply运行Angular摘要并更新范围：

angular.element(document.getElementById("pages")).bind("click", function() {
    $scope.menuService.show = false;
    $scope.$apply();
});