如何将参数传递给模态？

Question

我想将userName 从userNames 列表中传递给登录用户点击到推特引导程序modal。 我将 grails 与 angularjs 一起使用，其中数据通过 angularjs 呈现。

配置

我的 grails 查看页面 encouragement.gsp 是

<div ng-controller="EncouragementController">
    <g:render template="encourage/encouragement_modal" />
    <tr ng-cloak
                  ng-repeat="user in result.users">
                   <td>{{user.userName}}</rd>
                   <td>
                      <a class="btn btn-primary span11" href="#encouragementModal" data-toggle="modal">
                            Encourage
                       </a>
                  </td>
                </tr>

我的encourage/_encouragement_modal.gsp 是

<div id="encouragementModal" class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"
      aria-hidden="true">&times;</button>
    <h3>Confirm encouragement?</h3>
  </div>
  <div class="modal-body">
      Do you really want to encourage <b>{{aModel.userName}}</b>?
  </div>
  <div class="modal-footer">
    <button class="btn btn-info"
      ng-click="encourage('${createLink(uri: '/encourage/')}',{{aModel.userName}})">
      Confirm
    </button>
    <button class="btn" data-dismiss="modal" aria-hidden="true">Never Mind</button>
  </div>
</div>

那么，我怎样才能将userName 传递给encouragementModal？

Answer 1

要传递参数，您需要使用解析并在控制器中注入项目

$scope.Edit = function (Id) {
   var modalInstance = $modal.open({
      templateUrl: '/app/views/admin/addeditphone.html',
      controller: 'EditCtrl',
      resolve: {
         editId: function () {
           return Id;
         }
       }
    });
}

现在如果你会这样使用：

app.controller('EditCtrl', ['$scope', '$location'
       , function ($scope, $location, editId)

在这种情况下，editId 将是未定义的。你需要注入它，像这样：

app.controller('EditCtrl', ['$scope', '$location', 'editId'
     , function ($scope, $location, editId)

现在它可以正常工作了，我多次遇到同样的问题，一旦注入，一切都开始工作了！

Answer 2

另一个不工作。根据文档，这是您应该这样做的方式。

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal) {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      resolve: {
        test: function () {
          return 'test variable';
        }
      }
    });
};

var ModalInstanceCtrl = function ($scope, $modalInstance, test) {

  $scope.test = test;
};

See plunkr

Answer 3

或者，您可以创建一个新范围并通过范围选项传递参数

var scope = $rootScope.$new();
 scope.params = {editId: $scope.editId};
    $modal.open({
        scope: scope,
        templateUrl: 'template.html',
        controller: 'Controller',
    });

在你的模态控制器中传入 $scope，然后你不需要传入和 itemsProvider 或者你命名它的任何解决方法

modalController = function($scope) {
    console.log($scope.params)
}

Answer 4

您还可以通过添加带有模态实例的新属性并将其传递给模态控制器来轻松地将参数传递给模态控制器。 例如：

以下是我想要打开模态视图的点击事件。

 $scope.openMyModalView = function() {
            var modalInstance = $modal.open({
                    templateUrl: 'app/userDetailView.html',
                    controller: 'UserDetailCtrl as userDetail'
                });
                // add your parameter with modal instance
                modalInstance.userName = 'xyz';
        };

模态控制器：

angular.module('myApp').controller('UserDetailCtrl', ['$modalInstance',
                function ($modalInstance) {
                    // get your parameter from modal instance
                    var currentUser = $modalInstance.userName;
                    // do your work...
                }]);

Answer 5

我尝试如下。

我在鼓励按钮上调用ng-click到angularjs控制器，

               <tr ng-cloak
                  ng-repeat="user in result.users">
                   <td>{{user.userName}}</rd>
                   <td>
                      <a class="btn btn-primary span11" ng-click="setUsername({{user.userName}})" href="#encouragementModal" data-toggle="modal">
                            Encourage
                       </a>
                  </td>
                </tr>

我从 angularjs 控制器中设置了encouragementModal 中的userName。

    /**
     * Encouragement controller for AngularJS
     * 
     * @param $scope
     * @param $http
     * @param encouragementService
     */
    function EncouragementController($scope, $http, encouragementService) {
      /**
       * set invoice number
       */
      $scope.setUsername = function (username) {
            $scope.userName = username;
      };
     }
    EncouragementController.$inject = [ '$scope', '$http', 'encouragementService' ];

我提供了一个地方 (userName) 来从 encouragementModal 上的 angularjs 控制器获取价值。

<div id="encouragementModal" class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"
      aria-hidden="true">&times;</button>
    <h3>Confirm encouragement?</h3>
  </div>
  <div class="modal-body">
      Do you really want to encourage <b>{{userName}}</b>?
  </div>
  <div class="modal-footer">
    <button class="btn btn-info"
      ng-click="encourage('${createLink(uri: '/encourage/')}',{{userName}})">
      Confirm
    </button>
    <button class="btn" data-dismiss="modal" aria-hidden="true">Never Mind</button>
  </div>
</div>

成功了，我向自己致敬。

Answer 6

您应该真正使用 Angular UI 来满足这种需求。看看吧：Angular UI Dialog

简而言之，使用 Angular UI 对话框，您可以使用 resolve 将变量从控制器传递到对话框控制器。这是您的“来自”控制器：

var d = $dialog.dialog({
  backdrop: true,
  keyboard: true,
  backdropClick: true,
  templateUrl:  '<url_of_your_template>',
  controller: 'MyDialogCtrl',
  // Interesting stuff here.
  resolve: {
    username: 'foo'
  }
});

d.open();

在你的对话控制器中：

angular.module('mymodule')
  .controller('MyDialogCtrl', function ($scope, username) {
  // Here, username is 'foo'
  $scope.username = username;
}

编辑：由于新版本的ui-dialog，解析条目变为：

resolve: { username: function () { return 'foo'; } }

Answer 7

您可以简单地创建一个控制器功能并使用 $scope 对象传递您的参数。

$scope.Edit = function (modalParam) {
var modalInstance = $modal.open({
      templateUrl: '/app/views/admin/addeditphone.html',
      controller: function($scope) {
        $scope.modalParam = modalParam;
      }
    });
}

Answer 8

如果你没有使用 AngularJS UI Bootstrap，我是这样做的。

我创建了一个指令，它将保存您的模态元素的整个元素，并重新编译该元素以将您的作用域注入其中。

angular.module('yourApp', []).
directive('myModal',
       ['$rootScope','$log','$compile',
function($rootScope,  $log,  $compile) {
    var _scope = null;
    var _element = null;
    var _onModalShow = function(event) {
        _element.after($compile(event.target)(_scope));
    };

    return {
        link: function(scope, element, attributes) {
            _scope = scope;
            _element = element;
            $(element).on('show.bs.modal',_onModalShow);
        }
    };
}]);

我假设您的模态模板在您的控制器范围内，然后将指令 my-modal 添加到您的模板中。如果您将点击的用户保存到 $scope.aModel，那么原来的模板现在可以使用了。

注意：整个范围现在对您的模态可见，因此您也可以在其中访问 $scope.users。

<div my-modal id="encouragementModal" class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"
      aria-hidden="true">&times;</button>
    <h3>Confirm encouragement?</h3>
  </div>
  <div class="modal-body">
      Do you really want to encourage <b>{{aModel.userName}}</b>?
  </div>
  <div class="modal-footer">
    <button class="btn btn-info"
      ng-click="encourage('${createLink(uri: '/encourage/')}',{{aModel.userName}})">
      Confirm
    </button>
    <button class="btn" data-dismiss="modal" aria-hidden="true">Never Mind</button>
  </div>
</div>