Geek Answers Handbook

Combating the asynchronous nature of JavaScript with AngularJs

I have the following code

if (testNavigation() && $scope.selections.somethingChanged) {
    return false;
}

in testNavigation I call a modal dialog, and if I answer Ok in this dialog box, I set somethingChanged to false again. My problem is that when the code is executed, the testNavigation dialog and modal traversal are also executed later, and therefore my test does not work, since I need it to work. What should I change for my logic to work correctly, for example. first call my modal dialog and act accordingly in the main function?

This is my testNavigation method:

var testNavigation = function()
            {                
                if ($scope.selections.somethingChanged) {
                    
                    var modal = $modal.open({
                        controller: function ($scope) {
                            $scope.okClass = 'btn-primary',
                            $scope.okLabel = resourceFactory.getResource('Labels', 'yes'),
                            $scope.cancelLabel = resourceFactory.getResource('Labels', 'cancel'),
                            $scope.title = resourceFactory.getResource('Labels', 'unsavedChanges'),
                            $scope.message = resourceFactory.getResource('Messages', 'unsavedChanges');
                        },
                        templateUrl: '/app/templates/modal'
                    });

                    modal.result.then(function () {
                        
                        $scope.selections.somethingChanged = false;                      
                        
                    });
                }
                
                return true;
            }
Run codeHide result

I will try to add more information. I have LoadView () and New () functions in the index page controller. In both of these functions, I need to do the following:

if $scope.selections.somethingChanged = false .

if $scope.selections.somethingChanged = true , . "", .

, testNavigation. , , , . AngularJS/JavaScript, , , . $q, .

+4
2

testNavigation() ( , , somethingChanged , . , :

var testNavigation = function() {                
    if ($scope.selections.somethingChanged) {        
        var modal = [...]
        return modal.result;  // returns a promise that will be resolved when the modal is closed
    } else {
        return $q.when(true); // returns a promise that will be resolved straight away with true
    }
}

// when used:

testNavigation().then(function() {
    ...do stuff...
})
+2

, , , , -, .

testNavigation(), true, $scope.selections.somethingChanged false - , $ scope.selections.somethingChanged , , $scope.selections.somethingChanged false testNavigation, , if:

if( testNavigation() &&  // returns true no matter what.
    $scope.selections.somethingChanged // this is changed with a promise within testNavigation. that promise could either complete or not complete before this is evaluated with the if.
  ){
    return false;
}


var testNavigation = function() {
  if ($scope.selections.somethingChanged) {

    var modal = $modal.open({
      // details
    });

    modal.result.then(function() {
      // this is async and could take place any time between {locationA} and never.
      $scope.selections.somethingChanged = false;
    });
  //{locationA}
  }

  return true;
}
Hide result

, .

0

More articles:


All Articles