Is it possible to use a modal in Angular JS for mobile devices without compromising the layout? I'm having trouble setting up the controller for my modal inside my main controller and passing parameters. Should I consider using ui-bootstrap for this purpose, or would it be better suited for desktop applications?
Below is some sample HTML code:
<div ui-content-for="title">
<span>Employerss</span>
</div>
<div class="scrollable" ui-state="searchBar">
<div class="scrollable-content" ui-scroll-bottom='bottomReached()'>
<div class="list-group" style="height:80px;">
<a ng-repeat="employers in employerss" ng-click="select(employers)" class="list-group-item">
<p>{{employers.name | limitTo:70}}...</p>
</a>
</div>
</div>
</div>
<div ui-content-for="modals">
<div ng-include="'modal/modalemployers.html'" ng-controller="modalEmployersController"></div>
</div>
And here is the modal code:
<div class="modal" ui-if='modalemployers' ui-state='modalemployers'>
<div class="modal-backdrop in"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close"
ui-turn-off="modalemployers">
×
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>{{test}}</p>
</div>
<div class="modal-footer">
<button ui-turn-off="modalemployers" class="btn btn-default">Close</button>
<button ui-turn-off="modalemployers" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
In the Angular JS script, you can see controllers defined for handling the modal functionality. The issue of whether to use bootstrap-ui for a mobile-only application is also discussed.
$scope.select = function (item) {
var modalInstance = $modal.open({
templateUrl: 'modalemployers.html',
controller: 'modalEmployersController',
size: size,
resolve: {
item: function () {
return item;
}
}
});
}
Any advice on how to effectively implement modals in mobile Angular JS apps would be greatly appreciated! Thank you!