我想将userName从登录用户点击的userName列表传递到twitter bootstrap modal。
我在 angularjs 中使用 grails ，其中数据通过 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">×</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？
答案 0 :(得分：144)
要传递参数，您需要使用resolve并在控制器中注入项目
$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)
现在它会顺利工作，我多次遇到同样的问题，一旦注入，一切都开始工作了！
答案 1 :(得分：54)
另一个不起作用。根据文档，这是你应该这样做的方式。
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
答案 2 :(得分：48)
或者，您可以创建新范围并通过范围选项
传递参数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)
}
答案 3 :(得分：22)
您还可以通过添加具有模态实例的新属性轻松地将参数传递给模态控制器，并将其传递给模态控制器。 例如：
以下是我想要打开模态视图的点击事件。
$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...
}]);
答案 4 :(得分：17)
我在鼓励按钮上调用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控制器设置了userName encouragementModal。
/**
* 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">×</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>
答案 5 :(得分：10)
你应该真正使用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对话框以来，解析条目变为：
resolve: { username: function () { return 'foo'; } }
答案 6 :(得分：4)
您可以简单地创建一个控制器函数，并使用$ scope对象传递参数。
$scope.Edit = function (modalParam) {
var modalInstance = $modal.open({
templateUrl: '/app/views/admin/addeditphone.html',
controller: function($scope) {
$scope.modalParam = modalParam;
}
});
}
答案 7 :(得分：1)
如果你没有使用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">×</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>