将parameter passing给模态
我想从userName sa的login用户点击到twitter引导modal的列表中传递userName 。 我正在使用grails与angularjs ，其中数据通过angularjs呈现。
组态
我的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>
我的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 userName呢？
要传递参数，您需要使用解决方法并将其注入到控制器中
$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)
现在工作顺利，我多次面临同样的问题，一旦注入，一切都开始工作！
另一个不起作用。 根据文件，这是你应该这样做的方式。
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; };
见plunkr
或者，你可以创build一个新的范围，并通过范围选项通过params
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) }
通过添加一个带有模态实例的新属性，并将其传送到模态控制器，您也可以轻松地将parameter passing给模态控制器。 例如：
以下是我想要打开模态视图的单击事件。
$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... }]);
我尝试如下。
我在ng-click 鼓励button上调用了ng-click to 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 ）来从angularjs控制器获取值在incentivementModal上的值。
<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>
它工作，我向自己致敬。
你应该真的使用Angular UI来满足这个需求。 检查出来： Angular UI对话框
简而言之，通过Angular UI对话框，您可以使用resolve将控制器中的variables传递给对话框控制器。 这是你的“from”控制器：
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-对话框的新版本，parsing条目变成：
resolve: { username: function () { return 'foo'; } }
您可以简单地创build一个控制器函数，并使用$ scope对象传递参数。
$scope.Edit = function (modalParam) { var modalInstance = $modal.open({ templateUrl: '/app/views/admin/addeditphone.html', controller: function($scope) { $scope.modalParam = modalParam; } }); }
如果你不使用AngularJS UI Bootstrap，那么我是这么做的。
我创build了一个指令来保存你的模态的整个元素，并重新编译这个元素来将你的作用域注入到它中。
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">×</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>
