Передать параметр в модальный
Я хочу передать userName из списка userName вошедший в систему пользователь нажимает на Twitter начальной загрузки modal, Я использую Grails с Angularjs, где данные отображаются через Angularjs.
конфигурация
Моя страница просмотра Грааля 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?
8 ответов
Я попробовал как ниже.
я звонил ng-click контроллеру angularjs по кнопке Encourage,
<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.
/**
* 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 на 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>
Это сработало, и я отдал честь.
Чтобы передать параметр, вам нужно использовать разрешение и вставить элементы в контроллер
$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;
};
В качестве альтернативы вы можете создать новую область видимости и передать параметры через параметр области видимости.
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)
}
Вы также можете легко передать параметры модальному контроллеру, добавив новое свойство с экземпляром модального режима и получить его модальному контроллеру. Например:
Следующее - мое событие щелчка, на котором я хочу открыть модальное представление.
$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...
}]);
Вы должны действительно использовать Angular UI для этих нужд. Проверьте это: Angular UI Dialog
В двух словах, с помощью диалогового окна Angular UI вы можете передать переменную из контроллера в диалоговый контроллер, используя resolve, Вот ваш контроллер "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;
}
РЕДАКТИРОВАТЬ: так как новая версия пользовательского интерфейса, запись разрешения становится:
resolve: { username: function () { return 'foo'; } }
Вы можете просто создать функцию контроллера и передать свои параметры с помощью объекта $scope.
$scope.Edit = function (modalParam) {
var modalInstance = $modal.open({
templateUrl: '/app/views/admin/addeditphone.html',
controller: function($scope) {
$scope.modalParam = modalParam;
}
});
}
Если вы не используете 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>