Получить данные формы из UI Modal в Angular Js

Question

Итак, я довольно новичок в Angular и создал Modal для входа. Я пытаюсь показать вход пользователя с помощью окна предупреждения, чтобы проверить, отправлены ли мои данные формы контроллеру. Данные не отправляются контроллеру. Ниже приведен код.

Войти-popup.html

<div class="modal-dialog"> 
    <!--<div class="modal-content">--> 

     <!--Close Form Button--> 
     <div class="modal-header"> 
      <button type="button" class="close" ng-click="cancel()">&times;</button> 
      <h4 class="modal-title">Log In</h4> 
     </div> 

     <!--Form Body--> 
     <div class="modal-body"> 
      <form role="form"> 
       <div class="form-group"> 
        <input ng-model="user.username" type="email" class="form-control" placeholder="Email" id="username"> 
       </div> 
       <div class="form-group"> 
        <input ng-model="user.password" type="password" class="form-control" placeholder="Password" id="password"> 
       </div> 
      </form> 
     </div> 
     <!--Login Button--> 
     <div class="modal-footer"> 
      <button class="btn btn-success btn-block" ng-click="login(user)">Let's GO</button> 
     </div> 


    <!--</div>--> 
</div> 

app.js

var app = angular.module('LoginPage',['ngAnimate', 'ui.bootstrap']); 

app.controller('LoginController',['$scope','$uibModal', function($scope,$uibModal){ 
     $scope.name = 'a100'; 
     $scope.open = function(){ 
      var modalInstance = $uibModal.open({ 
        animation: 'true', 
        templateUrl: 'login-popup.html', 
        controller: 'LoginModalController' 
      }); 
     }; 
}]); 

app.controller('LoginModalController',['$scope','$uibModalInstance',function($scope,$uibModalInstance, $modalInstance){ 
    $scope.cancel = function() { 
     $uibModalInstance.dismiss('cancel'); 
     }; 
    $scope.user = {}; 
    $scope.login = function(user){ 
     $scope.user = user; 
     alert(user); 
     $uibModalInstance.close(); 
    } 
}]); 

Таким образом, предупреждение (пользователь) дает 'object object' предупредительное сообщение в браузере. Как это решить?

Answer 1

пользователь - это объект в этом случае. alert отображает только текст. Вы можете сделать это:

alert('Username: ' + user.username + ' Password: ' + user.password); 

В качестве альтернативы, если вы просто делаете это для тестирования, вы можете использовать:

console.log(user), which will give you an expandable object. 

Если вы хотите, чтобы это «угловой», как тогда я предлагаю смотреть на $ окна и/или $ log. Просто для развития, в любом случае достаточно.

Окно оповещения

$window.alert('Username: ' + user.username + ' Password: ' + user.password); 

Console Logging

$log.debug(user), which will give you an expandable object. 

• $ окно: https://docs.angularjs.org/api/ng/service/ $ окно
• $ Журнал: https://docs.angularjs.org/api/ng/service/ $ войти

Answer 2

подход, упомянутый @brianslattery, должен работать, тестовый код здесь https://plnkr.co/edit/3MkHOx2fiHLYfHUPHLS8?p=preview

$scope.login = function(user) { 
    $scope.user = user; 
    alert(user.username + " " + user.password); 
    $uibModalInstance.close(); 
    } 

Проблема с именем пользователя, вы упомянули, что вы используете типа = «электронная почта», и должен войти действительный адрес электронной почты, согласно сообщению this, поэтому ваше свойство модели будет обновлено.

<input ng-model="user.username" type="email" class="form-control" placeholder="Email" id="username" />