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
          });
        }
    }
});

注意：这仅用于概念验证。您可能希望if / else在您拥有ng-click / ui-sref的情况下切换。

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

1 个答案: