web-dev-qa-db-ja.com

angular 1.5のui.bootstrap.modalでangularコンポーネントを使用する方法

Ui.bootstrap.modalでangularコンポーネントを使用したいと思います。 angularバージョンは1.5です。
以下のように使用しようとしました。

コンポーネント

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

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

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

親コントローラー

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

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

  }
}

parentController.openModal()を実行すると、 $ injector：unpr Unknown Provider のエラーが発生しましたが、モーダルウィンドウは開いています。
ui.bootstrap.modalでangularコンポーネントを使用する方法はありますか？さらに情報が必要な場合は、お知らせください。
ありがとうございました。

編集
Renato Machadoのui.bootstrap.modalでコンポーネントを使用する方法があります、ありがとうRenato。
しかし、私は少し複雑で便利ではないと感じています。最後に、モーダル内でコンポーネントを使用する方が良いと思います。
モーダルは通常の方法で開かれ（コントローラとテンプレートを$uibModal.open({})に設定するだけ）、モーダルには一般的に使用したいロジックを持つコンポーネントが含まれます。
モーダルには、モーダルウィンドウを閉じるようなモーダルに関連する単純なロジックのみが必要です。
主にビジネス/アプリケーションに関連する別のロジックは、コンポーネントに含める必要があります。
簡単に共通化できます。

javascriptangularjsangular-ui-bootstrap
40
wtadahiro

編集：UI Bootstrap 2.1.0現在、bootstrapモーダルのコンポーネントのネイティブサポートがあります。モーダルに関するいくつかの問題を修正するために、2.1.0以降にいくつかのクイックリリースがあったようですので、必ず最新のものを入手してください。

UIを使用するバージョンについては、このPlunkを参照してください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");
    };
  }]
});

元の答えは以下のとおりです。

先日もこれを理解しようとしていました。このリンクでこの投稿で見つけた情報を利用して、これを実現する別の方法を試しました。これらは私が助けたいくつかの参照リンクです：

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

http://www.codelord.net/ （これはコンポーネントのコールバックへの引数の受け渡しを理解するのに役立ちました）

また、ここにプランクがあります： http://plnkr.co/edit/PjQdBUq0akXP2fn5sYZs?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({
                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

親コントローラーを渡すことで複雑にする必要はありません。モーダルを表示する.component内からアクセスできます。

コンポーネント

/**
 * @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();
    }

  }

}());

モーダルを開く

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

テンプレートはコンポーネントであると述べているため、$ scope。$ parentは常にモーダルインスタンスを指します。 $ close（）関数にアクセスできるようにします。

データの受け渡し

コンポーネントにデータを渡す必要がある場合、またはコンポーネントからデータを受け取る必要がある場合は、次のようにできます。

  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',
  });

念のため、コンポーネントを作成するためにこの 構造スタイルガイド を使用しています。

9
kevinius

$ uibModalの$close()関数と$dismiss()関数にアクセスし、コンポーネント内のいくつかの親データと関数バインディングにアクセスする場合は、それらをすべてそのまま渡すことができます。

モーダルロジックを開く

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

モーダルログインコンポーネント

{
    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

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

AngularJS 1.5のドキュメントは少しまばらですが、関数ラッパーとして&バインディングの使用方法を示しています。 https://docs.angularjs.org/guide/component

6
Matt Janssen

モーダルインスタンスを含むモーダルコンポーネントに親コントローラを渡す必要があります。そのためには、親コンポーネントにモーダルの生成HTMLを追加する必要があります

親コンポーネント

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

モーダルコンポーネント

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


}

必要なコントローラーは$ onInitの後にしか利用できないため、注意してください。

3
Renato Machado