web-dev-qa-db-fra.com

Comment utiliser angular angulaire avec ui.bootstrap.modal dans angular angulaire 1.5??

Je voudrais utiliser angular angulaire avec ui.bootstrap.modal. angular angulaire est 1.5.
J'ai essayé d'utiliser comme ci-dessous.

composant 

function MyComponentController($uibModalInstance){
  var ctrl = this;

  ctrl.doSomething = function() {
    //doSomething
  }
}

app.component('myComponent', {
  contoller: MyComponentController,
  templateUrl: '/path/to/myComponent.html'
}

contrôleur parent 

function parentController($uibModal){
  var ctrl = this;

  ctrl.openModal = function(){
    var modalInstance = $uibModal.open({
      template: '<my-component></my-component>'

  }
}

Et quand j'exécute parentController.openModal(), j'ai l'erreur de $ injector: fournisseur inconn bien que la fenêtre modale soit ouverte.
Existe-t-il un moyen d’utiliser angular avec $ ui.bootstrap.modal?? Si vous avez besoin de plus d’informations, merci de me le faire savoir.
Merci.

[~ # ~] éditer [~ # ~]
J'ai un moyen d'utiliser le composant avec ui.bootstrap.modal de Renato Machado, merci Renato.
Mais j'estime que c'est un peu compliqué et pas pratique. Donc, finalement, je pense qu'il est préférable d'utiliser le composant dans le modal.
Le modal est ouvert de manière normale (il suffit de définir le contrôleur et le modèle dans $uibModal.open({})) et le modal contient le composant contenant les logiques que vous souhaitez utiliser couramment.
Modal ne devrait avoir que des logiques simples liées à modal comme une fenêtre modale proche.
Une autre logique liée principalement à l'entreprise/à l'application doit figurer dans le composant.
Il est facile de banaliser.

javascriptangularjsangular-ui-bootstrap
40
wtadahiro

EDIT: À partir de l’interface utilisateur Bootstrap 2.1.0), les composants sont pris en charge en natif dans bootstrap). Il semble y avoir eu plusieurs versions rapides après la version 2.1.0. pour résoudre certains problèmes avec les modaux, alors je serais sûr de saisir le dernier.

Voir ce Plunk pour une version utilisant l'interface utilisateur Bootstrap 2.1.0+

http://plnkr.co/edit/jy8WHfJLnMMldMQRj1tf?p=preview

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

angular.module('app')
  .component('myContent', {
     template: 'I am content! <button type="button" class="btn btn-default" ng-click="$ctrl.open()">Open Modal</button>',
     controller: function($uibModal) {
        $ctrl = this;
        $ctrl.dataForModal = {
        name: 'NameToEdit',
        value: 'ValueToEdit'
     }

    $ctrl.open = function() {
      $uibModal.open({
         component: "myModal",
         resolve: {
           modalData: function() {
             return $ctrl.dataForModal;
           }
         }
       }).result.then(function(result) {
            console.info("I was closed, so do what I need to do myContent's  controller now.  Result was->");
      console.info(result);
       }, function(reason) {
           console.info("I was dimissed, so do what I need to do myContent's controller now.  Reason was->" + reason);
       });
    };
  }
});

angular.module('app')
  .component('myModal', {
template: `<div class="modal-body"><div>{{$ctrl.greeting}}</div> 
<label>Name To Edit</label> <input ng-model="$ctrl.modalData.name"><br>
<label>Value To Edit</label> <input ng-model="$ctrl.modalData.value"><br>
<button class="btn btn-warning" type="button" ng-click="$ctrl.handleClose()">Close Modal</button>
<button class="btn btn-warning" type="button" ng-click="$ctrl.handleDismiss()">Dimiss Modal</button>
</div>`,
  bindings: {
    modalInstance: "<",
    resolve: "<"
  },
  controller: [function() {
    var $ctrl = this;
    $ctrl.$onInit = function() {
      $ctrl.modalData = $ctrl.resolve.modalData;
    }
    $ctrl.handleClose = function() {
      console.info("in handle close");
      $ctrl.modalInstance.close($ctrl.modalData);
    };
    $ctrl.handleDismiss = function() {
      console.info("in handle dismiss");
      $ctrl.modalInstance.dismiss("cancel");
    };
  }]
});

La réponse originale est ci-dessous:

J'essayais de comprendre cela l'autre jour aussi. J'ai pris les informations que j'ai trouvées dans ce post avec ce lien pour essayer de trouver un autre moyen d'accomplir cela. Voici quelques liens de référence que j'ai trouvés qui m'ont aidé:

https://github.com/angular-ui/bootstrap/issues/568

http://www.codelord.net/ (Celui-ci a aidé à comprendre le passage d'arguments aux rappels dans les composants)

Voici également un Plunk: http://plnkr.co/edit/PjQdBUq0akXP2fn5sYZ?p=preview

J'ai essayé de démontrer un scénario réel réel utilisant un modal pour modifier certaines données.

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

angular.module('app')
.component('myContent', {
    template: 'I am content! <button type="button" class="btn btn-default" ng-click="$ctrl.open()">Open Modal</button>',
    controller: function($uibModal) {
        $ctrl = this;
        $ctrl.dataForModal = {
            name: 'NameToEdit',
            value: 'ValueToEdit'
        }
        $ctrl.open = function() {
            $uibModal.open({
                template: '<my-modal greeting="$ctrl.greeting" modal-data="$ctrl.modalData" $close="$close(result)" $dismiss="$dismiss(reason)"></my-modal>',
                controller: ['modalData', function(modalData) {
                    var $ctrl = this;
                    $ctrl.greeting = 'I am a modal!'
                    $ctrl.modalData = modalData;
                }],
                controllerAs: '$ctrl',
                resolve: {
                    modalData: $ctrl.dataForModal
                }
            }).result.then(function(result) {
                console.info("I was closed, so do what I need to do myContent's controller now and result was->");
                console.info(result);
            }, function(reason) {
                console.info("I was dimissed, so do what I need to do myContent's controller now and reason was->" + reason);
            });
        };
    }
});

angular.module('app')
.component('myModal', {
    template: `<div class="modal-body"><div>{{$ctrl.greeting}}</div> 
<label>Name To Edit</label> <input ng-model="$ctrl.modalData.name"><br>
<label>Value To Edit</label> <input ng-model="$ctrl.modalData.value"><br>
<button class="btn btn-warning" type="button" ng-click="$ctrl.handleClose()">Close Modal</button>
<button class="btn btn-warning" type="button" ng-click="$ctrl.handleDismiss()">Dimiss Modal</button>
</div>`,
    bindings: {
        $close: '&',
        $dismiss: '&',
        greeting: '<',
        modalData: '<'
    },
    controller: [function() {
        var $ctrl = this;
        $ctrl.handleClose = function() {
            console.info("in handle close");
            $ctrl.$close({
                result: $ctrl.modalData
            });
        };
        $ctrl.handleDismiss = function() {
            console.info("in handle dismiss");
            $ctrl.$dismiss({
                reason: 'cancel'
            });
        };
    }],
});
63
PCalouche

Il n'est pas nécessaire de compliquer les choses en passant par le contrôleur parent, vous pouvez simplement y accéder depuis le composant .component qui affiche le modal.

Composant 

/**
 * @ngdoc component
 * @name fsad.component:video
 *
 * @description <fsad-video> component, in development...
 *
 */


(function () {
  'use strict';

  angular.module('fsad').component('fsadVideo', {
    bindings: {},
    templateUrl: function(appConstant){return appConstant.paths.modules.fsad + 'leefloon/fsad-video.html'},
    controller: controller
  });

  controller.$inject = ['$scope'];
  function controller($scope){

    var $ctrl = this;

    setDataModel();

    /****************************************************************/

    $ctrl.ui.close = close;

    /****************************************************************/

    function setDataModel(){

      $ctrl.ui = {};

    }
    function close(){
      $scope.$parent.$close();
    }

  }

}());

Ouverture du modal 

  var modalInstance = $uibModal.open({
    backdrop: 'static',
    keyboard: true,
    backdropClick: false,
    template: '<fsad-video></fsad-video>',
    windowClass: 'edit-contactenblad',
  });

Puisque vous déclarez que le modèle est un composant, le paramètre $ scope. $ Parent pointera toujours vers l'instance modale. Vous permettant d'accéder à la fonction $ close ().

Passer et recevoir des données

Si vous avez besoin de transmettre des données au composant ou de recevoir des données du composant, procédez comme suit.

  var modalInstance = $uibModal.open({
    backdrop: 'static',
    keyboard: true,
    backdropClick: false,
    template: '<fsad-video method="$ctrl.method" on-viewed="$ctrl.userHasViewedVideo(time)"></fsad-ideo>',
    controller: function(){
      this.method = method;
      this.userHasViewedVideo = function(time){}
    },
    controllerAs: '$ctrl',
    windowClass: 'edit-medewerker',
  });

Juste sur une note de côté, j'utilise ceci guide de style de structure pour créer le composant.

9
kevinius

Si vous souhaitez accéder aux fonctions $close() et $dismiss() du $ uibModal, ainsi qu'à des liaisons de données et de fonctions parent dans votre composant, vous pouvez les transmettre comme suit:

Logique modale ouverte 

$uibModal.open({
    template: '<login close="$close()" dismiss="$dismiss()" ' +
        'email="$ctrl.cookieEmail" check-login="$ctrl.ajaxLogin(user, pass)"></login>',
    controller: function () {
        this.cookieEmail = $cookies.get('savedEmail');
        this.ajaxLogin = AjaxLoginService.login;
    },
    controllerAs: '$ctrl'
});

Composant de connexion modale 

{
    templateUrl: 'view/login.html',
    bindings: {
        email: '<',
        checkLogin: '&',
        close: '&',
        dismiss: '&'
    },
    controller: function () {
        var viewModel = this;

        viewModel.password = '';

        viewModel.submit = function () {
            viewModel.checkLogin(
                { user: viewModel.email, pass: viewModel.password }
            ).then(function (success) {
                viewModel.close();
            });
        }
    }
}

HTML modal 

<form ng-submit="$ctrl.submit()">
    <input type="text" ng-model="$ctrl.email" />
    <input type="password" ng-model="$ctrl.password" />
    <button type="button" ng-click="$ctrl.dismiss()">Cancel</button>
    <button type="submit">Login</button>
</form>

Les documents AngularJS 1.5 sont un peu clairsemés, mais ils montrent l’utilisation du & liaison comme encapsuleur de fonction: https://docs.angularjs.org/guide/component

6
Matt Janssen

Vous devez passer le contrôleur parent au composant modal avec l'instance modale dessus. Pour ce faire, vous devez ajouter le code HTML de génération du modal dans le composant parent.

composant parent

$ctrl.openModal = function(){
    $ctrl.modalInstance = $uibModal.open({
        template: '<your-modal></your-modal>',
        appendTo : $document.find('parentComponent')
    });
}

composante modale

.component('yourModal', {
        templateUrl: 'path/to/modal.html',
        replace: true,
        require: {
            parent : '^parentComponent'
        },
        controller: ModalCtrl
    });

function ModalCtrl() {
    var $ctrl = this;

    $ctrl.$onInit = function(){

        var instance = $ctrl.parent.modalInstance;

        $ctrl.items = ['item1', 'item2', 'item3'];

        $ctrl.selected = {
            item: $ctrl.items[0]
        };

        $ctrl.ok = function () {
            instance.close($ctrl.selected);
        };

        $ctrl.cancel = function () {
            instance.dismiss('cancel');
        };

        instance.result.then(function (selectedItem) {
            $ctrl.selected = selectedItem;
        }, function () {
            console.log('Modal dismissed at: ' + new Date());
        });
    };


}

Attention, le contrôleur requis ne sera disponible qu'après le $ onInit.

3
Renato Machado