Я хочу передать userName
из списка userName
зарегистрированный пользователь нажимает на twitter bootstrap modal
.
Я использую grails с angularjs, где данные отображаются с помощью 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
?
Я вызывал 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>
Я установил userName
of 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
), чтобы получить значение от регулятора 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>
angular.copy(user)
всего пользователя, а не одну строку для его имени, в контроллере не забудьте использовать angular.copy(user)
.
Чтобы передать параметр, вам необходимо использовать разрешение и ввести элементы в контроллер
$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 будет undefined. Вам нужно ввести его, например:
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.$new(true)
$rootScope
$scope.$new(true)
чтобы создать новую изолированную область без необходимости $rootScope
.
Вы также можете легко передать параметры модальному контроллеру, добавив новое свойство с экземпляром модального и доведя его до модального контроллера. Например:
Ниже приводится мое событие click, на котором я хочу открыть модальное представление.
$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 пользовательский интерфейс для этого. Проверьте это: Angular Диалоговое окно пользовательского интерфейса
В двух словах, с диалоговым окном 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;
}
EDIT: начиная с новой версии ui-диалога, запись разрешения становится:
resolve: { username: function () { return 'foo'; } }
resolve: function(){return {username: 'foo'}}
Вы можете просто создать контрольную функцию и передать свои параметры с объектом $scope.
$scope.Edit = function (modalParam) {
var modalInstance = $modal.open({
templateUrl: '/app/views/admin/addeditphone.html',
controller: function($scope) {
$scope.modalParam = modalParam;
}
});
}
Если вы не используете AnglerJS UT 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>