[英]How to pass parameters to a modal?
I want to pass the userName
from a list of userName
sa logged in user clicks on to twitter bootstrap modal
. 我想将userName
从用户点击登录的userName
列表传递给twitter bootstrap modal
。 I am using grails with angularjs , where data is rendered via angularjs . 我正在使用带有angularjs的 grails ,其中数据通过angularjs呈现。
My grails view page encouragement.gsp
is 我的grails查看页面的encouragement.gsp
.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>
My encourage/_encouragement_modal.gsp
is 我的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>
So, how can I pass userName
to encouragementModal
? 那么,我如何将userName
传递给encouragementModal
?
To pass the parameter you need to use resolve and inject the items in controller 要传递参数,您需要使用resolve并在控制器中注入项目
$scope.Edit = function (Id) {
var modalInstance = $modal.open({
templateUrl: '/app/views/admin/addeditphone.html',
controller: 'EditCtrl',
resolve: {
editId: function () {
return Id;
}
}
});
}
Now if you will use like this: 现在,如果您将使用这样:
app.controller('EditCtrl', ['$scope', '$location'
, function ($scope, $location, editId)
in this case editId will be undefined. 在这种情况下,editId将是未定义的。 You need to inject it, like this: 你需要注入它,像这样:
app.controller('EditCtrl', ['$scope', '$location', 'editId'
, function ($scope, $location, editId)
Now it will work smooth, I face the same problem many time, once injected, everything start working! 现在它会顺利工作,我多次遇到同样的问题,一旦注入,一切都开始工作了!
The other one doesn't work. 另一个不起作用。 According to the docs this is the way you should do it. 根据文档,这是你应该这样做的方式。
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;
};
Alternatively you can create a new scope and pass through params via the scope option 或者,您可以创建新范围并通过范围选项传递参数
var scope = $rootScope.$new();
scope.params = {editId: $scope.editId};
$modal.open({
scope: scope,
templateUrl: 'template.html',
controller: 'Controller',
});
In your modal controller pass in $scope, you then do not need to pass in and itemsProvider or what ever resolve you named it 在你的模态控制器中传入$ scope,你就不需要传入了itemsProvider或者解决了你命名它的东西
modalController = function($scope) {
console.log($scope.params)
}
You can also easily pass parameters to modal controller by added a new property with instance of modal and get it to modal controller. 您还可以通过添加具有模态实例的新属性并将其传递给模态控制器,轻松地将参数传递给模态控制器。 For example: 例如:
Following is my click event on which i want to open modal view. 以下是我想要打开模态视图的点击事件。
$scope.openMyModalView = function() {
var modalInstance = $modal.open({
templateUrl: 'app/userDetailView.html',
controller: 'UserDetailCtrl as userDetail'
});
// add your parameter with modal instance
modalInstance.userName = 'xyz';
};
Modal Controller: 模态控制器:
angular.module('myApp').controller('UserDetailCtrl', ['$modalInstance',
function ($modalInstance) {
// get your parameter from modal instance
var currentUser = $modalInstance.userName;
// do your work...
}]);
I called ng-click
to angularjs controller on Encourage button, 我在Encourage按钮上调用了ng-click
to angularjs controller,
<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>
I set userName
of encouragementModal
from angularjs controller. 我设置userName
的encouragementModal
从angularjs控制器。
/**
* 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' ];
I provided a place( userName
) to get value from angularjs controller on encouragementModal
. 我提供了一个地方( userName
),以从angularjs控制器获得价值encouragementModal
。
<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>
You should really use Angular UI for that needs. 您应该真正使用Angular UI来满足这些需求。 Check it out: Angular UI Dialog 检查出来: Angular UI对话框
In a nutshell, with Angular UI dialog, you can pass variable from a controller to the dialog controller using resolve
. 简而言之,使用Angular UI对话框,您可以使用resolve
将变量从控制器传递到对话框控制器。 Here's your "from" controller: 这是你的“来自”控制器:
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();
And in your dialog controller: 在你的对话框控制器中:
angular.module('mymodule')
.controller('MyDialogCtrl', function ($scope, username) {
// Here, username is 'foo'
$scope.username = username;
}
EDIT: Since the new version of the ui-dialog, the resolve entry becomes: 编辑:自新版本的ui对话框以来,解析条目变为:
resolve: { username: function () { return 'foo'; } }
You can simply create a controller funciton and pass your parameters with the $scope object. 您可以简单地创建一个控制器函数,并使用$ scope对象传递您的参数。
$scope.Edit = function (modalParam) {
var modalInstance = $modal.open({
templateUrl: '/app/views/admin/addeditphone.html',
controller: function($scope) {
$scope.modalParam = modalParam;
}
});
}
If you're not using AngularJS UI Bootstrap, here's how I did it. 如果你没有使用AngularJS UI Bootstrap,我就是这样做的。
I created a directive that will hold that entire element of your modal, and recompile the element to inject your scope into it. 我创建了一个指令,它将保存模态的整个元素,并重新编译元素以将范围注入其中。
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);
}
};
}]);
I'm assuming your modal template is inside the scope of your controller, then add directive my-modal to your template. 我假设你的模态模板在你的控制器范围内,然后将指令my-modal添加到你的模板。 If you saved the clicked user to $scope.aModel , the original template will now work. 如果您将单击的用户保存到$ scope.aModel ,则原始模板现在可以正常工作。
Note: The entire scope is now visible to your modal so you can also access $scope.users in it. 注意:整个范围现在对模态可见,因此您还可以访问其中的$ 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.