1

i have one issue.my requirement is when user will try to move to next state/page one confirm box will appear and if user is clicking on ok button then only it will navigate to next state otherwise it will remain as it is.I am explaining my code below.

<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>

Suppose user clicked on profile menu,first one confirm box will come and after pressing ok it will move.

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

updated js code

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

Here also the confirm box is coming but problem is it is first moving to profile state and showing the confirm box.I need the before moving to the next state the confirm box should display and after pressing ok it will navigate.i tried using ng-click there but by using this it is missing the active class and cursor:pointer property on the menu.Please help me to resolve this issue.

Improve this question
4
  • Pass ui-sref to next view on OK button and close modal on click on Cancel button. That should do..I guess.. Commented Oct 29, 2015 at 8:06
  • @MoidMohd : Can you edit your answer ? Commented Oct 29, 2015 at 9:01
  • In your modal template add ui-sref attribute to OK button to go to other state(state that you want to go on click of ok button) and on 'CANCEL' button simply close the modal. Commented Oct 29, 2015 at 9:35
  • @MoidMohd :I can understand but how can i pass the required state dynamically.I am little bit confused.Can you give one example based on my code. Commented Oct 29, 2015 at 9:41

1 Answer 1

Reset to default
1

Update: Parsing ui-sref to be used in $state.go is more difficult than I have imagined. At last I've chosen to artificially "click" the element again...

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

This section is outdated

You can try like this (untested)

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

Note: This is just for proof of concept. You might want to do if/else to switch in cases where you have ng-click/ui-sref.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

@ lcycool : I added your code part.Here i am getting some issue and error as well.First time when i am clicking on profile menu it is moving to profile page and displays the confirm box.Second when i am in department page and clicked on profile menu it is throwing this Uncaught Error: Could not resolve '.profile' from state 'dashboard.dept' error.Please check my updated code on the post.
Can you try by passing the full route 'dashboard.dept' and 'dashboard.profile' in the ui-sref?
@ lcycool : i addedd in both but still error is there and after moving to page the confirmation box is coming.
@ lcycool : i tried your updated code.But issue is same after click on profile menu the profile page is coming and then the confirm box is coming.for pressing cancel is fine but when i am clicking on ok button and next time click on profile menu no confirmation box is coming .here also how can i get the confirm text.I have posted mu updated js code.Please check.
@subhra Updated. On my test code preventDefault can stop the state transition, I'm not sure what happen in your case. Anyway let's try adding some other code to see whether they can stop the transition.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.