【问题标题】:pass simple parameter to angular ui-bootstrap modal?将简单参数传递给角度 ui-bootstrap 模态?
【发布时间】:2015-05-22 14:59:20
【问题描述】:

我看到很多关于将许多复杂的东西发布到 ui-bootstrap modals 的帖子,但我只想传递一个简单的参数,以便我可以使用它在对话框中显示不同的内容。

例如,我有 MyDocumentController as mydoc 的主文档

MyDocumentController中是一个函数如

_this.modals = {
    inviteUser: function() {
      $modal.open({
        animation: true,
        templateUrl: 'modules/templates/modals/modal-invite-user.html',
        controller: 'UserInviteModalController as invite',
        size: 'lg'
      });
    }, ...

我在主文档中这样称呼它,这里是我想要传递参数的地方:

<a href="" ng-click="users.modals.inviteUser(returningUser)">

这里是模态的控制器:

    (function() {

  'use strict';

  angular.module('mymodule')
    .controller('UserInviteModalController', function($log, $modalInstance, toastr) {

      var _this = this;

      _this.someVar = HERE'S WHERE I WANT TO GET THE VALUE returningUser FROM THE NG-CLICK

      _this.inviteDialog = {
        close: function() {
          $modalInstance.close();
        },
        resendInvite: function() {
          toastr.success('A new invite has been sent.');
          $modalInstance.close();
        }
      };

    });
})();

将简单参数传递给对话框的控制器的过程是什么?

【问题讨论】:

    标签: javascript angularjs twitter-bootstrap angular-ui-bootstrap


    【解决方案1】:

    尝试使用resolve

    _this.modals = {
      inviteUser: function(returningUser) {
        $modal.open({
          animation: true,
          templateUrl: 'modules/templates/modals/modal-invite-user.html',
          controller: 'UserInviteModalController as invite',
          size: 'lg',
          resolve: {
            returningUser: function() {
              return returningUser;
            }
          }
        });
      }, ...
    

    然后将其注入您的控制器:

    angular.module('mymodule')
    .controller('UserInviteModalController', function($log, $modalInstance, toastr, returningUser) {
        var _this = this;
    
        _this.someVar = returningUser;
    

    【讨论】:

      猜你喜欢
      • 2014-03-30
      • 1970-01-01
      • 1970-01-01
      • 2019-05-05
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-09-16
      • 1970-01-01
      相关资源
      最近更新 更多