AngularJS：从列表中传递数据到模态

Question

我目前正在学习如何从头构建一个MEAN webapp。东西很好，直到这一点，但现在我坚持试图通过ng-click = updatePerson（person）从我的列表（ng-repeat）传递数据到我的模态。我完全不知道为什么我无法访问列表中的数据。我尝试了20个变体，以便在两个示波器之间链接数据，但没有取得任何成功。

这是我的控制器：

angular.module('userCtrl', ['userService','ui.bootstrap']) 
.controller('userController', function(User, $uibModal, $log, $scope) { 
var vm = this; 
User.all().success(function(data) { 
    vm.users = data; 
}) 
vm.deleteUser = function(id) { 
    User.delete(id).success(function(data) { 
     User.all().success(function(data) { 
      vm.users = data; 
     }); 
    }); 
}; 
vm.createUser = function() { 
    User.create(vm.userData).success(function(data) { 
     vm.userData = {}; 

     User.all().success(function(data) { 
      vm.users = data; 
     }); 

    }); 
}; 
vm.updateUser = function(selectedUser) { 
    $scope.selectedUser = selectedUser; 
    var modalInstance = $uibModal.open({ 
     animation: true, 
     templateUrl: 'app/views/pages/modal.html', 
     resolve: { 
      user: function() { 
       return $scope.selectedUser; 
      } 
     } 
    }); 
    modalInstance.result.then(function(selectedUser) { 
     $scope.selected = selectedUser; 
    }); 
}; 
}); 

我的角度路由器：

angular.module('appRoutes', ['ngRoute']) 
.config(function($routeProvider, $locationProvider) { 
$routeProvider 
.when('/', { 
    templateUrl : 'app/views/pages/home.html', 
    controller : 'userController', 
    controllerAs : 'user' 
}) 
.when('/users', { 
    templateUrl : 'app/views/pages/user.html', 
    controller : 'userController', 
    controllerAs : 'user' 
}); 
$locationProvider.html5Mode(true); 
}); 

我的列表：

<div class="btn-group"> 
<button type="button" class="btn-lg btn-default glyphicon glyphicon-plus" data-toggle="modal" data-target="#createModal"></button> 
<table class="table table-nonfluid table-bordered table-striped" ng-show="user.users"> 
<thead> 
    <tr> 
     <th></th> 
     <th>Vorname</th> 
     <th>Nachname</th> 
     <th>E-Mail</th> 
    </tr> 
</thead> 
<tbody> 
    <tr ng-repeat="person in user.users"> 
     <td><button ng-click="user.deleteUser(person._id)" class="btn btn-default btn-lg glyphicon glyphicon-trash"></button></td> 
     <td>{{person.firstname}}</td> 
     <td>{{person.lastname}}</td> 
     <td>{{person.mail}}</td> 
     <td><button ng-click="user.updateUser(person)" class="btn btn-default btn-lg glyphicon glyphicon-trash"></button></td> 
     <!--<td><button class="btn-lg btn-default glyphicon glyphicon-option-horizontal" data-toggle="modal" data-target="#updateModal"></button>  </td>--> 
    </tr> 
</tbody> 
</table> 
<!--Create Modal--> 
<div class="modal fade bs-example-modal-lg" id="createModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title" id="exampleModalLabel">Neue Person</h4> 
      </div> 
      <form id="form1" ng-submit="user.createUser()"> 
       <div class="modal-body"> 
        <div class="form-group"> 
         <label for="recipient-name" class="control-label">Vorname</label> 
         <input type="text" class="form-control" ng-model="user.userData.firstname"> 
        </div> 
        <div class="form-group"> 
         <label for="recipient-name" class="control-label">Nachname</label> 
         <input type="text" class="form-control" ng-model="user.userData.lastname"> 
        </div> 
        <div class="form-group"> 
         <label for="recipient-name" class="control-label">E-Mail</label> 
         <input type="text" class="form-control" ng-model="user.userData.mail"> 
        </div> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button> 
        <button id="button1" type="submit" class="btn btn-primary">Person erstellen</button> 
       </div> 
      </form>     
     </div> 
    </div> 
</div> 
</div> 
<script type="text/javascript"> 
$('#button1').click(function() { 
    $('#createModal').modal('hide'); 
}); 
</script> 

这里是我的模式：

<div class="modal-content bs-example-modal-lg" role="dialog document"> 
<div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
    <h4 class="modal-title" id="exampleModalLabel">Ändere Person</h4> 
</div> 
    <div class="modal-body"> 
     <div class="form-group"> 
      <label for="recipient-name" class="control-label">Vorname</label> 
      <input type="text" class="form-control" ng-model="person.firstname" placeholder={{person.firstname}}> 
     </div> 
     <div class="form-group"> 
      <label for="recipient-name" class="control-label">Nachname</label> 
      <input type="text" class="form-control" ng-model="person.firstname" placeholder={{person.lastname}}> 
     </div> 
     <div class="form-group"> 
      <label for="recipient-name" class="control-label">E-Mail</label> 
      <input type="text" class="form-control" ng-model="person.firstname" placeholder={{person.mail}}> 
     </div> 
    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button> 
     <button id="button1" type="submit" class="btn btn-primary">Person ändern</button> 
    </div>   
</div> 

Answer 1

您正在解决的user不会自动绑定到视图。你需要一个控制器来做到这一点。您可以使用下面的代码，或者您可以使用controllerAs，但您必须相应地更新模式的HTML。

vm.updateUser = function(selectedUser) { 
    $scope.selectedUser = selectedUser; 
    var modalInstance = $uibModal.open({ 
     animation: true, 
     templateUrl: 'app/views/pages/modal.html', 
     resolve: { 
      user: function() { 
       return $scope.selectedUser; 
      } 
     }, 
     controller: function($scope, user) { 
      $scope.user = user; 
     } 
    }); 
    modalInstance.result.then(function(selectedUser) { 
     $scope.selected = selectedUser; 
    }); 
};