Javascript 如何将参数传递给模态？

我想将登录用户单击的

用户名列表中的
用户名
传递到twitter引导
模式
。
我将grails与angularjs一起使用，其中数据通过angularjs呈现

配置
我的grails查看页面
鼓励.gsp
is

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

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

那么，如何将
用户名
传递给
encouragementModal
？
您应该真正使用Angular UI来满足这些需求。请查看：

简而言之，使用Angular UI dialog，您可以使用
resolve
将变量从控制器传递到dialog控制器。这是您的“发件人”控制器：

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

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

编辑：由于新版本的ui对话框，解析条目变为：

resolve:{username:function（）{return'foo'；}}
我尝试了以下方法。
我调用了
ng，点击
按钮，鼓励按钮上的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>

我提供了一个位置（
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>


&时代；
确认鼓励？
你真的想鼓励{{userName}}吗？
证实
不要介意

它起作用了，我向自己致敬。另一个不起作用。根据文件，这是你应该做的

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

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

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

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

在这种情况下，editId将是未定义的。您需要将其注入，如下所示：

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

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

现在它将顺利工作，我面临同样的问题很多次，一旦注射，一切开始工作
 或者，您可以创建一个新范围，并通过范围选项传递参数

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

在模态控制器pass-In$scope中，您不需要传入和itemsProvider或任何您命名的解析

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

如果您没有使用AngularJS UI引导，下面是我如何做到的

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

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

我假设您的模式模板在控制器的范围内，然后将指令我的模式添加到您的模板中。如果将单击的用户保存到$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>


&时代；
确认鼓励？
你真的想鼓励{{aModel.userName}吗？
证实
不要介意
您还可以通过添加带有modal实例的新属性并将其获取到modal控制器，轻松地将参数传递到modal控制器。
例如：

下面是我要打开模式视图的单击事件

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

模态控制器：

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

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

您只需创建一个控制器函数并使用$scope对象传递参数

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

你应该用angularjs来处理这些事情。结帐ng-include。嗨，我没试过这样。但建议是+1。实际上，这应该是
resolve:function（）{return{username:'foo'}}
设置答案不会起作用。bicycle就在下面，应该是-resolve:{data:function（）{return'foo'；}}}@bornytm现在你是对的。但是当我写下答案时，语法是：
resolve:{username:'foo'}
I+1，我向你致敬。如果有人需要将整个用户传递给模式，而不是她的名字的单个字符串，请记住在控制器中使用
angular.copy（user）
$rootScope.$new（）+1，因为这允许传递数据，而无需为模式定义控制器。顺便说一句，您只需执行
$scope.$new（true）
即可创建一个新的隔离作用域，而无需注入
$rootScope
@Mwayi:谢谢您的提示！经典注入（使用
resolve
）的问题是参数是强制性的，因此每次打开一个模态时，必须解析所有参数，否则调用
$modal.open（）
将失败，因为控制器需要它的参数。通过使用这个整洁的
scope
技巧，依赖项成为可选的。您不应该像['$scope'，'$modalInstance'，function（）那样包装它注入依赖项？谢谢你的评论，Jose，这正是我的问题。如果你要缩小Angular代码，是的，你必须使用ModalInstanceCtrl.Jose的数组语法，+1这也是我的问题。我认为每个人都在使用AngularUI！就像任何AngularUI一样，注入是解决方案。谢谢！这个未定义的错误让我头疼直到我看到你的答案！就像一个符咒！如果你想传递某个超时对象而不是简单的var，你该怎么办？在解决超时之前，解析不会启动，这发生在超时结束时。我的解决方案中缺少的是在简单引号之间使用$scope和$location…我不知道这些参数uments必须是strings执行此操作时，我得到“angular.js:10071错误：[$injector:unpr]未知提供程序：editIdProvider正是我需要的。工作非常完美。