如何在 angular 1.5 中将 angular 组件与 ui.bootstrap.modal 一起使用？

Question

我想将 angular 组件与 ui.bootstrap.modal 一起使用。 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 的错误，尽管模态 window 是打开的。
有没有办法将 angular 组件与 ui.bootstrap.modal 一起使用？如果您需要更多信息，请告诉我。
谢谢。

编辑
我有办法使用 Renato Machado 的 ui.bootstrap.modal 组件，谢谢 Renato。
但是感觉有点复杂，不方便。所以最后我认为最好在模态中使用组件。
模态以常规方式打开（只需在 $uibModal.open({}) 中设置控制器和模板）并且模态包含具有您想要常用的逻辑的组件。
模态应该只有与模态相关的简单逻辑，如关闭模态 window.
另外一个主要和business/Application相关的逻辑应该在component.
它使通用化变得容易。

Answer 1

您需要将父控制器传递给带有模态实例的模态组件。为此，您需要在父组件

中附加模态的生成 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 之后可用。

Answer 2

如果您想要访问 $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

Answer 3

编辑：从 UI Bootstrap 2.1.0 开始，在 bootstrap 模态中对组件提供了原生支持。看起来在 2.1.0 之后有几个快速版本来修复模态的一些问题，所以我一定要抓住最新的。

使用 UI Bootstrap 2.1.0+

的版本请参阅此 Plunk

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");
    };
  }]
});

原回答如下：

前几天我也在想办法解决这个问题。我利用我在这个 post 中找到的信息和这个 link 来尝试想出一个替代方法来完成这个。这些是我发现对我有帮助的一些参考 link：

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

http://www.codelord.net/（这有助于理解将参数传递给组件中的回调）

这里还有一个 Plunk：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'
            });
        };
    }],
});

Answer 4

无需通过传递父控制器使其变得更复杂，您只需从显示模态的 .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',
  });

Just on a side note, i'm using this structure style guide to create the component.

如何在 angular 1.5 中将 angular 组件与 ui.bootstrap.modal 一起使用？

How to use angular component with ui.bootstrap.modal in angular 1.5?

javascript

angularjs

angular-ui-bootstrap

父组件

模态组件