1
Ich versuche ein Modal zu öffnen, wenn ich auf die Schaltfläche Bearbeiten auf einem Angular UI Grid klicke. Ich bin neu in Angular und lerne immer noch. Ich habe einige Suchen durchgeführt, kann aber immer noch nicht herausfinden, wie ich meine modale Instanz in den StaffController injizieren kann, damit sie verwendet werden kann. Ich schätze jeden Rat/jede Hilfe zu diesem Thema. Danke,Eckiger Boostrap-Modal-Service
Ich bin mit dem Winkel modal Beispiel aus: https://angular-ui.github.io/bootstrap/
Index-Datei (enthält die Grid und Beispiel Modal Buttons):
@*Staff Grid*@
<body ng-app="Application">
<div ng-controller="ApiStaffController">
<div class="table-responsive angular-grid" ui-grid="gridOptions" ui-
grid-move-columns ui-grid-resize-columns ui-grid-exporter ui-grid-selection>
</div>
</div>
<div ng-controller="ModalDemoCtrl as $ctrl" class="modal-demo">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">Create User</h3>
</div>
<div class="modal-body" id="modal-body">
<label asp-for="Person.Forename" class="control-label"></label>
<input type="text" class="form-control" ng-model="$ctrl.newUser.Forename" />
<label asp-for="Person.Surname" class="control-label"></label>
<input type="text" class="form-control" ng-model="$ctrl.newUser.Surname" />
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="$ctrl.ok()" ng-disabled="!$ctrl.newUser.Forename || !$ctrl.newUser.Surname">OK</button>
<button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
</div>
</script>
<script type="text/ng-template" id="stackedModal.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title-{{name}}">The {{name}} modal!</h3>
</div>
<div class="modal-body" id="modal-body-{{name}}">
Having multiple modals open at once is probably bad UX but it's technically possible.
</div>
</script>
<button type="button" class="btn btn-default" ng-click="$ctrl.open()">Open me!</button>
<button type="button" class="btn btn-default" ng-click="$ctrl.open('lg')">Large modal</button>
<button type="button" class="btn btn-default" ng-click="$ctrl.open('sm')">Small modal</button>
<button type="button" class="btn btn-default" ng-click="$ctrl.open('sm', '.modal-parent')">
Modal appended to a custom parent
</button>
<button type="button" class="btn btn-default" ng-click="$ctrl.toggleAnimation()">Toggle Animation ({{ $ctrl.animationsEnabled }})</button>
<button type="button" class="btn btn-default" ng-click="$ctrl.openComponentModal()">Open a component modal!</button>
<button type="button" class="btn btn-default" ng-click="$ctrl.openMultipleModals()">
Open multiple modals at once
</button>
<div ng-show="$ctrl.selected">Selection from a modal: {{ $ctrl.selected }}</div>
<div class="modal-parent">
</div>
</div>
ich eine Datei mit dem Namen: ModalController, dass die unten finden (Dies ist aus dem Beispiel)
angular.module('Application').controller('ModalDemoCtrl', function
($uibModal, $log, $document) {
var $ctrl = this;
$ctrl.items = ['item1', 'item2', 'item3'];
$ctrl.animationsEnabled = true;
$ctrl.open = function (size, parentSelector) {
var parentElem = parentSelector ?
angular.element($document[0].querySelector('.modal-demo ' +
parentSelector)) : undefined;
var modalInstance = $uibModal.open({
animation: $ctrl.animationsEnabled,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
controllerAs: '$ctrl',
size: size,
appendTo: parentElem,
resolve: {
items: function() {
return $ctrl.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$ctrl.selected = selectedItem;
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
$ctrl.openComponentModal = function() {
var modalInstance = $uibModal.open({
animation: $ctrl.animationsEnabled,
component: 'modalComponent',
resolve: {
items: function() {
return $ctrl.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$ctrl.selected = selectedItem;
}, function() {
$log.info('modal-component dismissed at: ' + new Date());
});
};
$ctrl.openMultipleModals = function() {
$uibModal.open({
animation: $ctrl.animationsEnabled,
ariaLabelledBy: 'modal-title-bottom',
ariaDescribedBy: 'modal-body-bottom',
templateUrl: 'stackedModal.html',
size: 'sm',
controller: function ($scope) {
$scope.name = 'bottom';
}
});
$uibModal.open({
animation: $ctrl.animationsEnabled,
ariaLabelledBy: 'modal-title-top',
ariaDescribedBy: 'modal-body-top',
templateUrl: 'stackedModal.html',
size: 'sm',
controller: function ($scope) {
$scope.name = 'top';
}
});
};
$ctrl.toggleAnimation = function() {
$ctrl.animationsEnabled = !$ctrl.animationsEnabled;
};
});
// Bitte beachten Sie, dass $ uibModalInstance eine modales Fenster (Beispiel) Abhängigkeit darstellt. // Es ist nicht dasselbe wie der oben verwendete $ uibModal-Dienst.
angular.module('Application').controller('ModalInstanceCtrl', function
($uibModalInstance, StaffService, items) {
var $ctrl = this;
$ctrl.items = items;
$ctrl.selected = {
item: $ctrl.items[0]
};
$ctrl.ok = function() {
alert($ctrl.newUser.Forename);
alert($ctrl.newUser.Surname);
//$uibModalInstance.close($ctrl.selected.item); //Untill we do the saving staff
};
$ctrl.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
});
// Bitte beachten Sie, dass die Bindungen zum Schließen und Schließen von $ uibModalInstance stammen.
angular.module('Application').component('modalComponent', {
templateUrl: 'myModalContent.html',
bindings: {
resolve: '<',
close: '&',
dismiss: '&'
},
controller: function() {
var $ctrl = this;
$ctrl.$onInit = function() {
$ctrl.items = $ctrl.resolve.items;
$ctrl.selected = {
item: $ctrl.items[0]
};
};
$ctrl.ok = function() {
$ctrl.close({ $value: $ctrl.selected.item });
};
$ctrl.cancel = function() {
$ctrl.dismiss({ $value: 'cancel' });
};
}
});`
Ich habe einen Personal-Controller hier die Daten von einem API-Aufruf zurückgibt, die Benutzeroberfläche zu füllen grid.`
var editButtonTemplate = '<div class="ui-grid-cell-contents"><button type=
"button" class="btn btn-xs btn-primary" ng-
click="grid.appScope.vm.editRow(grid, row)" <i class="fa fa-edit"></i>
</button></div>'
/*Staff Grid*/
app.controller('ApiStaffController', function ($scope, StaffService) {
$scope.gridOptions = {
data: 'Data',
enableFiltering: true,
showGroupPanel: true,
enableGridMenu: true,
resizable: true,
enableColumnResizing: true,
enableRowSelection: true,
enableRowHeaderSelection: false,
showGridFooter: true,
noUnselect: true,
multiSelect: false,
modifierKeysToMultiSelect: false,
noUnselect: true,
columnDefs: [{ field: 'person.forename', displayName: 'Forename' },
{ field: 'person.surname', displayName: 'Surname' },
{ field: 'person.dateofbirth', displayName: 'DOB' },
{ field: 'employmentStartDate', displayName: 'Employment Start Date' },
{ field: 'employmentEndDate', displayName: 'Employment End Date' },
{ name: 'edit', displayName: 'Edit', cellTemplate: editButtonTemplate },
{ name: 'delete', displayName: 'Delete', cellTemplate: '<button id="deleteBtn" type="button" class="btn-xs btn-danger fa fa-1x fa-trash-o" ng-click="$parent.$parent.deleteTeam(row.entity)"></button> ' }]
};
/*Gets all the staff records using the service*/
GetAllStaff();
function GetAllStaff() {
var promiseGet = StaffService.getAllStaff();
promiseGet.then(function (pl) { $scope.Staff = pl.data, $scope.Data = pl.data },
function (errorPl) {
$log.error('Error Getting Records.', errorPl);
});
}
});
Haben Sie diesen Beitrag http://stackoverflow.com/questions/32950698/angularjs-open-modal-from-controller? –
Ich habe es ja gesehen, aber es hat mir leider nicht geholfen. @AmadouBeye –