I have a page, index.blade.php. (no angularjs)
<body>
<table>
<!-- If i click on a row, I store its id in a global variable (selected_id),
then I can click on show_edit_modal to view its details -->
<tr></tr>
<tr></tr>
</table>
<button id="show_edit_modal">Show Modal</button>
<div id="edit_modal">
<!-- empty at first -->
</div>
$('#show_edit_modal').click(function(){
// Fetch view
$.ajax({
type: 'GET',
url: '/get_edit/' + selected_id,
success: function(response) {
$('#edit_modal').html(response);
}
});
});
</body>
Click on “Add” button -> it will display a modal.
An ajax request will be sent on click to fetch the view (edit.blade.php) to be placed inside that modal. Not using an iframe. The request will return a view/blade file.
In the controller, receiver of ajax request:
$data = Model::find($id);
return view('edit', compact('data'));
edit.blade.php
<div ng-app="itemsModule">
<div ng-controller="editController">
...
</div>
</div>
<script src="angular.min.js">
<script src="/controllers/edit.js">
That fetched view has an angularjs app in it. The angularjs library script, controller script, all loaded inside that view.
Is this possible? If so, is there a standard way of doing it? Or should I try restructuring?
I have tried to run this and it works on the first click, but when I click on a different row and try to edit the details, I get a warning about attempting to load angularjs more than once.
