web-dev-qa-db-fra.com

Angularjs UI Modal Forms

J'avais l'habitude d'avoir une boîte de dialogue de connexion en utilisant bootstrap modal:

  $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(...);
      }
    }
  };

Le formulaire de connexion ressemble à ceci:

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")

Dans angular ui 0.4 et angularjs 1.1.3 cela a bien fonctionné.

J'ai mis à jour la dernière angular ui 0.6 et 1.2rc2 et maintenant cela ne fonctionne plus. Spécifiquement $scope.user n'est plus le même que celui du formulaire. Comment obtenir la portée $ de l'élément de formulaire? Je le vois dans le batarang mais pas depuis le contrôleur loginDialog.

Merci

javascripttwitter-bootstrapangularjsangular-uiangular-ui-bootstrap
13
Harry

Il manque la propriété resolve sur votre objet modèle ouvert. C'est la nouvelle façon de passer des locaux au contrôleur de votre modal.

De la documentation ui-bootstrap:

résoudre - les membres qui seront résolus et transmis au contrôleur en tant que sections locales; c'est l'équivalent de la propriété de résolution pour les routes AngularJS

Code mis à jour et fonctionnant 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;
                }
            }
        });
    };
};
27
mortalapeman

Dans la continuité de la réponse ci-dessus, j'ai bifurqué le plongeur et apporté quelques modifications mineures:

Versions utilisées:

  • angularjs: 1.2.11
  • angular-ui-bootstrap: 0.10.0
  • bootstrap: 3.1.0

Une autre différence importante est que l'objet user est maintenant passé du modèle HTML, ce qui pourrait être le cas lorsque vous pourriez avoir une liste d'éléments affichés et que vous voudriez ouvrir une boîte de dialogue modale, en passant l'objet représentant l'élément de liste cliqué.

Plunker est à: http://plnkr.co/edit/bfpma2?p=preview

5
Amarjeet Singh