使用 angular.js 单击确认框的确定按钮后导航

Question

我有一个问题。我的要求是当用户尝试移动到下一个状态/页面时，会出现一个确认框，如果用户单击确定按钮，那么只有它会导航到下一个状态，否则它将保持原样.我在下面解释我的代码。

<li ui-sref-active="active" ><a ui-sref=".profile" confirm="Are you sure to move into next page?">Profile</a></li>
<li ui-sref-active="active"><a ui-sref=".dept" >Department</a></li>

假设用户点击配置文件菜单，第一个确认框会出现，然后按下确定它会移动。

 dashboard.directive('confirm', function(ConfirmService, $state) {
    return {
        restrict: 'A',
        scope: {
            eventHandler: '&ngClick'
        },
        link: function(scope, element, attrs){
          element.unbind("click");

          element.bind("click", function(e) {
            e.preventDefault(); // block the href generated by ui-sref
            ConfirmService.open(attrs.confirm, $state.go(attrs.uiSref)); // pass ui-sref into $state.go
          });
        }
    }
});

    dashboard.service('ConfirmService', function($uibModal) {
      var service = {};
      service.open = function (text, onOk) {
        var modalInstance = $uibModal.open({
          templateUrl: 'myModalContent.html',
          controller: 'ModalConfirmCtrl',
          resolve: {
            text: function () {
              return text;
            }
          }
        });

        modalInstance.result.then(function (selectedItem) {
          onOk();
        }, function () {
        });
      };

      return service;
    })

    dashboard.controller('ModalConfirmCtrl', function ($scope, $uibModalInstance, text) {

      $scope.text = text;

      $scope.ok = function () {
        $uibModalInstance.close(true);
      };

      $scope.cancel = function () {
        $uibModalInstance.dismiss('cancel');
      };
    });

更新的 js 代码

dashboard.directive('confirm', function($uibModal, $state,$timeout) {
    return {
        restrict: 'A',
        scope: {
            eventHandler: '&ngClick'
        },
        link: function(scope, element, attrs){
        var isConfirmed = false;

        element.bind("click", function (e) {
            if (!isConfirmed) {
                e.preventDefault();
                $uibModal.open({
                    templateUrl: 'myModalContent.html',
                    controller: function ($scope, $uibModalInstance) {
                        //$scope.text=text;
                        $scope.ok = function () { $uibModalInstance.close(); }
                        $scope.cancel = function () { $uibModalInstance.dismiss(); }
                    }
                })
                .result.then(function () {
                    isConfirmed = true;
                    $timeout(function () {
                        element.click();
                    });
                });
            }
        });
    }
    }
});

这里也出现了确认框，但问题是它首先移动到配置文件状态并显示确认框。我需要在移动到下一个状态之前确认框应该显示，按下确定后它将导航。我试过了在那里使用ng-click，但使用它会丢失菜单上的active 类和cursor:pointer 属性。请帮我解决这个问题。

Answer 1

更新：解析ui-sref 以用于$state.go 比我想象的要困难。最后我选择再次人工“点击”元素...

    link: function(scope, element, attrs){
        var isConfirmed = false;

        element.bind("click", function (e) {
            if (!isConfirmed) {
                e.preventDefault();
                $modal.open({
                    template: '<div ng-click="close()">yes</div><div ng-click="dismiss()">no</div>',
                    controller: function ($scope, $modalInstance) {
                        $scope.close = function () { $modalInstance.close(); }
                        $scope.dismiss = function () { $modalInstance.dismiss(); }
                    }
                })
                .result.then(function () {
                    isConfirmed = true;
                    $timeout(function () {
                        element.click();
                    });
                });

                // check if these 2 lines making any difference?
                e.stopImmediatePropagation();
                return false;
            }
            else {
                isConfirmed = false; // switch back to popup next time
            }
        });
    }

---

此部分已过时

你可以这样尝试（未经测试）

dashboard.directive('confirm', function(ConfirmService, $state) {
    return {
        restrict: 'A',
        scope: {
            eventHandler: '&ngClick'
        },
        link: function(scope, element, attrs){
          element.unbind("click");

          element.bind("click", function(e) {
            e.preventDefault(); // block the href generated by ui-sref
            ConfirmService.open(attrs.confirm, $state.go(attr.uiSref)); // pass ui-sref into $state.go
          });
        }
    }
});

注意：这仅用于概念验证。如果您有ng-click/ui-sref，您可能想要切换 if/else。