Angularjs UI модальные формы

Question

Я использовал, чтобы иметь диалог входа в систему с помощью загрузочного модальность:

$scope.loginDialog = { 
    backdrop: true, 
    keyboard: true, 
    windowClass: "modal loginDialog", 
    backdropClick: true, 
    templateUrl: '/tmpl/user/loginForm', 
    controller: function dialogController($scope, $modalInstance) { 
     $scope.submit = function() { 
     $http.post('/api/login', $scope.user).success(...); 
     } 
    } 
    }; 

Войти форма выглядит следующим образом:

form#loginBox(ng-submit="submit()") 
    .modal-body.login-box 
    .formItem 
     label(for='user[usernameOrEmail]') Name or Email: 
     input(type='text', name='user[usernameOrEmail]', required="required", value='', ng-model="user.user") 
    .formItem 
     label(for='user[password]') Password: 
     input(name='user[password]', type='password', value='', required="required", ng-model="user.password") 
    .modal-footer 
    input.btn.btn-primary(type="submit", value="Login") 

В угловом ш 0,4 и angularjs 1.1.3 это работало нормально ,

Я обновил до последних угловых ui 0.6 и 1.2rc2, и теперь это больше не работает. В частности, $scope.user уже не совпадает с формой в форме. Как получить $ scope элемента формы? Я вижу это в batarang, но не от контроллера loginDialog.

Благодаря

Answer 1

Вы пропускаете resolve свойства на вашем открытой модели объекта. Это новый способ передать местным жителям контроллер вашего модала.

С Ui-самозагрузкой документации:

Resolve - члены, которые будут решены, и перешли к контроллеру как местные жители; это эквивалентно свойство Resolve для AngularJS маршруты

Обновленного код и рабочие plunker

angular.module('plunker', ['ui.bootstrap']); 
var ModalDemoCtrl = function ($scope, $modal, $log) { 

    $scope.user = { 
     user: 'name', 
     password: null 
    }; 

    $scope.open = function() { 

     $modal.open({ 
      templateUrl: 'myModalContent.html', 
      backdrop: true, 
      windowClass: 'modal', 
      controller: function ($scope, $modalInstance, $log, user) { 
       $scope.user = user; 
       $scope.submit = function() { 
        $log.log('Submiting user info.'); 
        $log.log(user); 
        $modalInstance.dismiss('cancel'); 
       } 
       $scope.cancel = function() { 
        $modalInstance.dismiss('cancel'); 
       }; 
      }, 
      resolve: { 
       user: function() { 
        return $scope.user; 
       } 
      } 
     }); 
    }; 
}; 

Answer 2

В продолжении к выше ответу, я раздвоил plunker и сделал несколько незначительных изменений:

Версии, используемые:

• angularjs: 1.2.11
• угловой щ-самозагрузки: 0.10.0
• самозагрузки: 3.1.0

Другим важным отличием является то, что user объект теперь передается из шаблона HTML, который может быть случай, когда вы, возможно, список отображаемых элементов, и вы хотите открыть модальный диалог, передав объект, представляющий элемент списка, который нажал.

Plunker находится по адресу: http://plnkr.co/edit/bfpma2?p=preview