AngularJS Controller erfolgreich, window.location modal oder refreshing Seite nicht schließen

Question

Ich möchte die aktuelle Seite im auf aktualisieren und schließen Sie das modale nach dem Absenden eines Formulars ... Ich denke, ich habe es durch eine Variable ändern zu aktualisieren Das Ende der URL, aber der modale "Grau-out" -Abschnitt des Bildschirms verschwindet nicht ... und dafür ändert sich die URL im Browser nicht. Das console.log zeigt, dass ich zum "Erfolg" komme - irgendwelche Gedanken?

Mein Controller sieht aus wie dieses

$scope.addChild = function() { 
    var pid = $scope.child.parent_id; 
    $http.post('/api/child/', $scope.child) 
    .success(function(response) { 
     window.location.href='#/parent/details/'+pid+'?dt='+getTime(); 
    }); 
} 

pro Anfrage - hier ist der vollständige Code ...

app.js

var myApp = angular.module('myApp',['ngRoute']); 

/* -------------------------------------------- 
    ROUTES 
--------------------------------------------*/ 
myApp.config(function($routeProvider) { 

    $routeProvider 
    .when('/', { 
     templateUrl: 'views/dashboard.html' 
    }) 
    // parents 
     .when('/parents', { 
      controller:'ParentController', 
      templateUrl: 'views/parents.html' 
     }) 
     .when('/parents/details/:id',{ 
      controller:'ParentController', 
      templateUrl: 'views/parent_detail.html' 
     }) 
     .when('/parents/add',{ 
      controller:'ParentController', 
      templateUrl: 'views/parent_add.html' 
     }) 
     .when('/parents/edit/:id',{ 
      controller:'ParentController', 
      templateUrl: 'views/parent_edit.html' 
     }) 
    // childs 
     .when('/childs', { 
      controller:'ChildController', 
      templateUrl: 'views/childs.html' 
     }) 
     .when('/childs/details/:id',{ 
      controller:'ChildController', 
      templateUrl: 'views/child_detail.html' 
     }) 
     .when('/childs/add',{ 
      controller:'ChildController', 
      templateUrl: 'views/child_add.html' 
     }) 
     .when('/childs/edit/:id',{ 
      controller:'ChildController', 
      templateUrl: 'views/child_edit.html' 
     }) 
    // catch-all 
    .otherwise({ 
     redirectTo: '/' 
    }); 

}); 

ChildController.js

var myApp = angular.module('myApp'); 

myApp.controller('ChildController', ['$scope', '$http', '$location', '$routeParams', function($scope, $http, $location, $routeParams) { 
    console.log('Child Controller called...'); 
    $scope.loading = false; 


    $('#parentAddChildModal').on('hidden.bs.modal', function(){ 
     var modalParentId = $scope.child.parent_id; 
     $location.url("parents/details/"+modalParentId); 
    }) 



    $scope.getChilds = function() { console.log('getChilds called...'); 
     $scope.loading = true; 
     $http.get('/api/child') 
     .success(function(response) { 
      $scope.childs = response; 
      $scope.loading = false; 
     }); 
    } 

    $scope.setChildWithParentId = function(oid) { console.log('setChildWithParentId called...w/'+$routeParams.id); 
     $scope.child = { 
      parent_id: $routeParams.id 
      ,name: '' 
      ,username: '' 
      ,email: '' 
      ,password: '' 
      ,address: {} 
      ,phone: '' 
     }; 
    } 

    $scope.getChild = function() { console.log('getChild called...'); 
     var id = $routeParams.id;console.log('gonna get /api/childs/'+id); 
     $http.get('/api/child/'+id) 
     .success(function(response) {console.log('getChild response...'+id+'->'+response); 
      $scope.child = response; 
     }); 
    } 

    $scope.addChild = function() { console.log('addChild called...'); 
     console.log($scope.child); 
     $http.post('/api/child/', $scope.child) 
     .success(function(response) { 
      window.location.href='#/childs'; 
     }); 
    } 

    $scope.addChildWithParent = function() { console.log('addChildWithParent called...'); 
     console.log($scope.child); 
     var oid = $scope.child.parent_id; 
     $http.post('/api/child/', $scope.child) 
     .success(function(response) {console.log('addChildWithParent called...Success:'+oid); 
      $('#parentAddChildModal').modal('hide'); 
     }); 
    } 

    $scope.updateChild = function() { console.log('updateChild called...'); 
     var id = $routeParams.id; 
     $http.put('/api/child/'+id, $scope.child) 
     .success(function(response) { 
      window.location.href='#/childs'; 
     }); 
    } 

    $scope.removeChild = function(id) { console.log('removeChild called...'); 
     $http.delete('/api/child/'+id) 
     .success(function(response) { 
      window.location.href='#/childs'; 
     }); 
    } 

    $scope.getParents = function() { console.log('getParents called...'); 
     $http.get('/api/parent') 
     .success(function(response) { 
      $scope.parents = response; 
     }); 
    } 

    $scope.getInstruments = function() { console.log('getInstruments called...'); 
     $http.get('/api/instrument') 
     .success(function(response) { 
      $scope.instruments = response; 
     }); 
    } 

    console.log('Child Controller loaded...'); 

}]); 

index.htm l

<html ng-app="myApp" > 

<head> 

    <title>myApp - DEV</title> 

    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css" > 
    <link rel="stylesheet" href="css/style.css" > 

</head> 

<body> 

    <nav class="navbar navbar-default" > 
     <div class="container" > 
      <div class="navbar-header" > 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" > 
        <span class="sr-only" >Toggle navigation</span> 
        <span class="icon-bar" ></span> 
        <span class="icon-bar" ></span> 
        <span class="icon-bar" ></span> 
       </button> 
       <a class="navbar-brand" href="#/" >myApp - DEV</a> 
      </div> 
      <div id="navbar" class="collapse navbar-collapse" > 
       <ul class="nav navbar-nav navbar-right" > 
        <li><a href="#/childs" >Childs</a></li> 
       </ul> 
       <ul class="nav navbar-nav navbar-right" > 
        <li><a href="#/parents" >Parents</a></li> 
       </ul> 
      </div> 
      <!--/.nav-collapse --> 
     </div> 
    </nav> 

    <div class="container" > 
     <div class="row" > 
      <div class="col-md-12" > 
       <div ng-view></div> 
      </div> 
     </div> 
    </div> 
    <!-- /.container --> 

    <script src="lib/angular/angular.js" ></script> 
    <script src="lib/angular-route/angular-route.js" ></script> 
    <script src="lib/jquery/dist/jquery.js" ></script> 
    <script src="lib/bootstrap/dist/js/bootstrap.js" ></script> 
    <script src="lib/ui-bootstrap-tpls-2.5.0.min.js" ></script> 

    <script src="/app.js" ></script> 

    <script src="/controllers/parent.js" ></script> 
    <script src="/controllers/child.js" ></script> 


</body> 
</html> 

parent_detail.html

<a href="#/parents" >Go Back</a> 
<div class="panel panel-default" ng-init="getParent()" > 
    <div class="panel-heading" > 
     <h3 class="panel-title" > 
      {{parent.name}} 
      <div class="pull-right" > 
       <a href="#/parents/edit/{{parent._id}}" >Edit</a> | <a href="#" ng-click="removeParent(parent._id)" >Delete</a> 
      </div> 
     </h3> 
    </div> 
    <div class="panel-body" > 
     <div class="row" > 

      <div class="col-md-4" > 
       <p>Account Info</p> 
       <ul class="list-group" > 
        <li class="list-group-item" >Username: {{parent.username}}</li> 
        <li class="list-group-item" >Email: {{parent.email}}</li> 
        <li class="list-group-item" >&nbsp;</li> 
       </ul> 
      </div> 

      <div class="col-md-4" > 
       <p>Childs 
        <span class="pull-right" style="padding-right: 25px"> 
         <button class="btn btn-primary btn-xs" data-toggle="modal" data-target="#parentAddChildModal"> 
          Add Child 
         </button> 
        </span> 
       </p> 
      </div> 

     </div> 
    </div> 
</div> 

<!-- Modal --> 
<div class="modal fade" id="parentAddChildModal" tabindex="-1" role="dialog"> 

    <div class="modal-dialog modal-lg"> 

     <div class="modal-content" ng-controller="ChildController" ng-init="setChildWithParentId()" > 

      <form ng-submit="addChildWithParent()" > 

      <!-- Modal Header --> 
      <div class="modal-header" > 
       <button type="button" class="close" data-dismiss="modal" > 
        <span aria-hidden="true" >&times;</span> 
        <span class="sr-only" >Close</span> 
       </button> 
       <h4 class="modal-title" id="parentAddChild" > 
        Add Child 
       </h4> 
      </div> 

      <!-- Modal Body --> 
      <div class="modal-body" > 

       <div class="form-group has-error" > 
        <label>Parent ID:</label> 
        <input type="text" class="form-control input-sm disabled " ng-model="child.parent_id" > 
       </div> 
       <div class="form-group has-error" > 
        <label>Name:*</label> 
        <input type="text" class="form-control input-sm" ng-model="child.name" placeholder="Name" > 
       </div> 
       <div class="form-group has-error" > 
        <label>Email:*</label> 
        <input type="text" class="form-control input-sm" ng-model="child.email" placeholder="Email" > 
       </div> 
      </div> 

      <!-- Modal Footer --> 
      <div class="modal-footer" > 
       <button type="button" class="btn btn-default" data-dismiss="modal" > Close </button> 
       <button type="submit" class="btn btn-primary" >Submit</button> 
      </div> 

      </form> 

     </div> 

    </div> 

</div> 

bearbeitet aktuellen Stand widerspiegeln - noch nicht die modale

Answer 1

Schließen Wenn Sie window.location.href Redirect verwenden, wird es nicht Winkel Router über Standortänderungen wissen lassen. Der Digest-Zyklus wird also nicht ausgeführt und der Anwendungsstatus ändert sich nicht.

Verwenden Sie $location.path, um innerhalb des SPA zu navigieren. Durch den Aufruf der Methode path wird der Router über die geänderte Anwendungsroute informiert, und schließlich wird der Status ordnungsgemäß aktualisiert.

//First close the modal| 
$(modal).hide(); 
$location.path('#/parent/details/'+pid+'?dt='+getTime()); 

Answer 2

dem Controller ändern

myApp.controller('ChildController', ['$scope', '$http', '$location', '$routeParams', function($scope, $http, $location, $routeParams) { 
    console.log('Child Controller called...'); 
    $scope.loading = false; 


$('#parentAddChildModal').on('hidden.bs.modal', function(){ 
    var modalParentId = $scope.child.parent_id; 
    $location.url("parents/details/"+modalParentId); 
}) 

$scope.getChilds = function() { console.log('getChilds called...'); 
    $scope.loading = true; 
    $http.get('/api/child') 
    .success(function(response) { 
     $scope.childs = response; 
     $scope.loading = false; 
    }); 
} 

$scope.setChildWithParentId = function(oid) { console.log('setChildWithParentId called...w/'+$routeParams.id); 
    $scope.child = { 
     parent_id: $routeParams.id 
     ,name: '' 
     ,username: '' 
     ,email: '' 
     ,password: '' 
     ,address: {} 
     ,phone: '' 
    }; 
} 

$scope.getChild = function() { console.log('getChild called...'); 
    var id = $routeParams.id;console.log('gonna get /api/childs/'+id); 
    $http.get('/api/child/'+id) 
    .success(function(response) {console.log('getChild response...'+id+'->'+response); 
     $scope.child = response; 
    }); 
} 

$scope.addChild = function() { console.log('addChild called...'); 
    console.log($scope.child); 
    $http.post('/api/child/', $scope.child) 
    .success(function(response) { 
     $('#parentAddChildModal').modal('hide'); 
    }); 
} 

$scope.addChildWithParent = function() { console.log('addChildWithParent called...'); 
    console.log($scope.child); 
    var oid = $scope.child.parent_id; 
    $http.post('/api/child/', $scope.child) 
    .success(function(response) {console.log('addChildWithParent called...Success:'+oid); 
     //window.location.href='#/parents/details/'+oid+'?dt='+getTime(); 
     //$location.url('/#/parents/details/'+oid); 
     //$route.reload(); 
    }); 
    $('#parentAddChildModal').on('hidden.bs.modal', function(){ 
     $location.url('parents/details/'+oid); 
    }) 
} 

$scope.updateChild = function() { console.log('updateChild called...'); 
    var id = $routeParams.id; 
    $http.put('/api/child/'+id, $scope.child) 
    .success(function(response) { 
     window.location.href='#/childs'; 
    }); 
} 

$scope.removeChild = function(id) { console.log('removeChild called...'); 
    $http.delete('/api/child/'+id) 
    .success(function(response) { 
     window.location.href='#/childs'; 
    }); 
} 

$scope.getParents = function() { console.log('getParents called...'); 
    $http.get('/api/parent') 
    .success(function(response) { 
     $scope.parents = response; 
    }); 
} 

$scope.getInstruments = function() { console.log('getInstruments called...'); 
    $http.get('/api/instrument') 
    .success(function(response) { 
     $scope.instruments = response; 
    }); 
} 

console.log('Child Controller loaded...'); 

}]); 

Answer 3

Ich gehe davon aus, dass Sie Controller haben wie folgt aussieht:

angular 
    .module('sampleApp.controllers', []) 
    .controller('sampleAppController', function ($http, $scope, $route) 

Sehen Sie diese in .Controller oben hinzufügen $ route Funktion und jetzt Code wie folgt aussieht :

$(modal).hide(); 
$route.reload(); 

die Reihenfolge der Jquery-Datei ändern, wird es jetzt

index.html arbeiten:

<html ng-app="myApp" > 

<head> 

    <title>myApp - DEV</title> 

    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css" > 
    <link rel="stylesheet" href="css/style.css" > 

</head> 

<body> 

    <nav class="navbar navbar-default" > 
     <div class="container" > 
      <div class="navbar-header" > 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" > 
        <span class="sr-only" >Toggle navigation</span> 
        <span class="icon-bar" ></span> 
        <span class="icon-bar" ></span> 
        <span class="icon-bar" ></span> 
       </button> 
       <a class="navbar-brand" href="#/" >myApp - DEV</a> 
      </div> 
      <div id="navbar" class="collapse navbar-collapse" > 
       <ul class="nav navbar-nav navbar-right" > 
        <li><a href="#/childs" >Childs</a></li> 
       </ul> 
       <ul class="nav navbar-nav navbar-right" > 
        <li><a href="#/parents" >Parents</a></li> 
       </ul> 
      </div> 
      <!--/.nav-collapse --> 
     </div> 
    </nav> 

    <div class="container" > 
     <div class="row" > 
      <div class="col-md-12" > 
       <div ng-view></div> 
      </div> 
     </div> 
    </div> 
    <!-- /.container --> 

    <script src="lib/angular/angular.js" ></script> 
    <script src="lib/angular-route/angular-route.js" ></script> 
    <script src="lib/jquery/dist/jquery.js" ></script> 
    <script src="lib/bootstrap/dist/js/bootstrap.js" ></script> 
    <script src="lib/ui-bootstrap-tpls-2.5.0.min.js" ></script> 

    <script src="/app.js" ></script> 

    <script src="/controllers/parent.js" ></script> 
    <script src="/controllers/child.js" ></script> 


</body> 
</html>