【问题标题】:Angular.JS onclick function only called on first clickAngular.JS onclick 函数只在第一次点击时调用
【发布时间】:2015-12-16 17:29:22
【问题描述】:

我目前正在使用 Angular.JS 开发一个小型应用程序 在我看来,我有以下按钮

<md-button class="md-primary" ng-click="editUser(user, $event)">Edit</md-button>

editUser 方法如下所示:

$scope.editUser = function (user, $event) {

    $scope.userToEdit = user;

    $mdDialog.show({
            controller: DialogController,
            targetEvent: $event,
            templateUrl: '/js/modules/user/views/edit.tmpl.html',
            parent: angular.element(document.body),
            clickOutsideToClose: true,
            scope: $scope
        })
        .
        then(function (answer) {
            if (answer == "save") {
                for (right in $scope.allSystemRightsStatements) {
                    if ($scope.allSystemRightsStatements[right].selected) {
                        if( $scope.userToEdit.rights==null){
                            $scope.userToEdit.rights = [];
                        }
                        $scope.userToEdit.rights.push($scope.allSystemRightsStatements[right]);
                    }
                }
                $scope.updateUser($scope.userToEdit);
            }
            $scope.userToEdit = {};
        }, function () {
            $scope.userToEdit = {};
        });
};

$scope.updateUser = function (user) {
    //userService.updateUser makes a $http PUT request
    var promise = userService.updateUser(user);
    promise.then(function (result) {
        $mdToast.show(
            $mdToast.simple(result.message)
                .position($scope.getToastPosition())
                .hideDelay(3000)
        );
    }, function (reason) {
        $mdToast.show(
            $mdToast.simple(reason)
                .position($scope.getToastPosition())
                .hideDelay(3000)
        );
    }, function (update) {
    });
};

现在对话框很好地显示了,并且还调用了 answer 函数,一切都符合预期。

但是,当我第二次单击该按钮时,不会执行 editUser 功能。好像按钮的 onClick 事件已在对话框关闭时被删除。

非常感谢任何有关解决此问题的帮助, 谢谢

【问题讨论】:

  • 您在控制台日志中看到任何错误吗?
  • 您的错误可能出现在代码的 ..some small logic 部分...这也可能是由于您正在调用异步方法$scope.updateUser 然后立即将$scope.userToEdit 设置为一个空对象。 $scope.updateUser 可能没有时间完成它打算做的事情,您将传递的对象设置为空对象...
  • 没有控制台日志为空 :-( 更新实际上执行正确(由数据库反映)。我将添加小逻辑以进行澄清。
  • DialogController 是否也包含 editUser 的定义?
  • 如果您在function (user, $event) { 之后放置一个console.log(user),它甚至会记录一些东西吗?

标签: javascript angularjs


【解决方案1】:

正如here所说的

明确提及在隐藏对话框时将销毁作用域可能是个好主意(因此人们不应该直接传递控制器的 $scope)。

(关于您传递给 mdDialog 的范围)

因此,随着作用域被破坏,角度不会将您的按钮与任何操作绑定

【讨论】:

  • 为了澄清:我从$mdDialog.show电话中删除了scope: $scope并添加了locals: {user: user, .. other objects}
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-09-28
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多