We Keep Coding

Angular Routing Failure - Modal Pop Up

I'm working in Angular 8. I'm using NG-BOOTSTRAP for styling.
In several of my components I offer the ability to click a delete button on an item, this brings up a modal window with a YES or NO and when YES is clicked, the modal closes and the route appears to refresh, no actual browser refresh - this is what I want. The list is updated correctly and all seems fine. Then, when I try and click on any other route in my navbar they all fail and the page stays where it's at until I refresh the browser page - also, the link in the URL bar isn't updating, which I suspect is causing the pages not to be able to be routed to. Not sure why this behavior is happening. Frustrating too. Looking for some assistance if possible. Thanks.
THIS IS THE HTML TABLE
<tbody>
<tr *ngFor="let client of clients">
<td>{{ client.name | titlecase }}</td>
<td>{{ client.website }}</td>
<td>{{ client.phone }}</td>
<td>{{ client.address.street | titlecase }}, {{ client.address.city | titlecase }}
{{ client.address.state | uppercase }}
{{ client.address.zip }}</td>
<td>
<button class="btn btn-primary" (click)="editClient(client._id)">
<fa-icon [icon]="faEdit"></fa-icon>
</button>
<button class="btn btn-danger ml-3" (click)="open(content, client)">
<fa-icon [icon]="faTrashAlt"></fa-icon>
</button>
</td>
</tr>
</tbody>
----- THIS IS THE MODAL TEMPLATE (SAME HTML PAGE)------
<!-- MODAL TEMPLATE -->
<ng-template #content let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Delete Client?</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm">
<button class="btn btn-success mr-3" (click)="deleteClient(modalContent._id)">YES</button>
<button class="btn btn-danger" (click)="modal.close('Close click')">NO</button>
</div>
</div>
</div>
</ng-template>
----- THIS IS THE TS FILE -----
deleteClient(id) {
this._clientService.deleteClient(id).subscribe(
response => {
console.log(response['message']);
// Close the modal window and reload the component
this._modalService.dismissAll();
this.reloadComponent();
},
error => console.log(error['message'])
);
}
///// MODAL FUNCTIONS
open(content, client) {
this.modalContent = client;
this._modalService
.open(content, { ariaLabelledBy: 'modal-basic-title' })
.result.then(
result => {
this.closeResult = `Closed with: ${result}`;
},
reason => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
}
);
}
private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return 'by clicking on a backdrop';
} else {
return `with: ${reason}`;
}
}
///// FUNCTION TO RELOAD PAGE AFTER DELETE /////
reloadComponent() {
this._router.routeReuseStrategy.shouldReuseRoute = () => false;
this._router.onSameUrlNavigation = 'reload';
this._router.navigate(['admin/clients']);
}

Instead of reloading the page you could re-execute the call that binds the results from the backend to your clients var. This is at least a nice separation of sources & routing and can avoid further complications.
Something like:
deleteClient(id) {
this._clientService.deleteClient(id).subscribe(
response => {
console.log(response['message']);
// Close the modal window and reload the component
this._modalService.dismissAll();
this.getClients();
}, error => console.log(error['message'])
});
getClients() {
this._clientService.getClients().subscribe(
response => {
this.clients = response.data;
}, error => console.log(error['message'])
});

How to call a partial view within a Modal using Jquery

I have a list of products and you want to display a modal window to edit the parameters of these products
for this you have in each row a button that calls the modal ....
my Edit button in Index.cshtml:
<td>
Editar
</td>
my script in Index.cshtml:
<script>
var EditarProducto = function (codigoProducto) {
var url = "/Productoes/EditarProducto?Kn_CodigoProducto="+codigoProducto;
$("#EditModalBody").load(url, function () {
$("#myModalEditar").modal("show");
})
}
</script>
my modal Bootstrap in Index view:
<div class="modal fade" id="myModalEditar">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Editar Producto</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="EditModalBody">
</div>
</div>
</div>
</div>
my ActionResult in controller:
public ActionResult EditarProducto (int Kn_CodigoProducto)
{
Producto model = new Producto();
if(Kn_CodigoProducto >= 0)
{
var producto = db.Productoes.Where(c => c.Kn_CodigoProducto == Kn_CodigoProducto).FirstOrDefault();
model.v_Nombre = producto.v_Nombre;
}
return PartialView("_PartialEditar", model);
}
and my partial view that receives the model sent from the controller:
#model Dominio.Producto
<div class="jumbotron">
<label>Esto es una prueba #Model.v_Nombre</label>
</div>
I have the partial view inside the folder along with the Index.cshtml view
Also I have referenced the corresponding scripts, what is happening? What is missing? It is the first time that I work with partial and modal views ... am I doing it correctly?
Expected behavior: when you click on the edit button, the modal opens
Behavior obtained: although when clicking on the edit button it enters the action of my controller, it does not show the modal
any help for me?

Instead of this:
<script>
var EditarProducto = function (codigoProducto) {
var url = "/Productoes/EditarProducto?Kn_CodigoProducto="+codigoProducto;
$("#EditModalBody").load(url, function () {
$("#myModalEditar").modal("show");
})
}
</script>
Can you try this:
<script>
var EditarProducto = function (codigoProducto) {
var url = "/Productoes/EditarProducto?Kn_CodigoProducto="+codigoProducto;
$.ajax({
url: url,
type: 'GET',
success: function (result) {
$('#EditModalBody').html(result);
$("#myModalEditar").modal("show");
},
error: function (xhr, status) {
alert(status);
}
});
}
</script>

You don't need to write jquery to invoke modal popup, instead you can use data-toggle and data-target attribuites.
Editar

Using Angular controller inside Bootstrap Modal

[html]
<div class="modal fade" id="proj-edit" tabindex="-1" role="dialog" aria-hidden="true" data-remote="update.html">
<div class="modal-dialog">
<div class="modal-content" ng-controller="UpdateProjectController"></div>
</div>
</div>
[javascript]
var ProjectApp = angular.module('ProjectApp', ["ui.bootstrap"]);
ProjectApp.controller('UpdateProjectController', ["$scope","$http", function($scope, $http){
$scope.message = 'Please enter valid case number';
$scope.UpdateProject = function(){..do something..};
}]);
[update.html]
<div class="modal-header" >
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 id="myModalLabel" class="modal-title">Update Project</h4>
</div>
<div class="modal-body">
{{message}}
</div>
<div class="modal-footer">
<button type="submit" class="btn blue-soft" ng-click="UpdateProject()">Update</button>
<button type="button" class="btn default" data-dismiss="modal">Cancel</button>
</div>
Issue: Modal is being invoked from JQuery using .modal('show') method. My intention is to render the controller whenever the modal is opened. However, it seems that the modal does not recognise the controller and no message nor function from the controller can be executed. Appreciate your help on this matter. TQ.

HI please check the example
index.html
<!doctype html>
<html ng-app="plunker">
<head>
<script src="https://code.angularjs.org/1.2.18/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<form ng-submit="submit()">
<div class="modal-body">
<label>User name</label>
<input type="text" ng-model="user.user" />
<label>Password</label>
<input type="password" ng-model="user.password" />
<label>Add some notes</label>
<textarea rows="4" cols="50" ng-model="user.notes">
</textarea>
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
<input type="submit" class="btn primary-btn" value="Submit" />
</div>
</form>
</script>
<button class="btn" ng-click="open()">Open me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
</body>
</html>
example.js
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.user = {
user: 'name',
password: null,
notes: null
};
$scope.open = function () {
$modal.open({
templateUrl: 'myModalContent.html', // loads the template
backdrop: true, // setting backdrop allows us to close the modal window on clicking outside the modal window
windowClass: 'modal', // windowClass - additional CSS class(es) to be added to a modal window template
controller: function ($scope, $modalInstance, $log, user) {
$scope.user = user;
$scope.submit = function () {
$log.log('Submiting user info.'); // kinda console logs this statement
$log.log(user);
$modalInstance.dismiss('cancel'); // dismiss(reason) - a method that can be used to dismiss a modal, passing a reason
}
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
resolve: {
user: function () {
return $scope.user;
}
}
});//end of modal.open
}; // end of scope.open function
};
for reference http://embed.plnkr.co/As959V/

The reason is update.html is quite a massive form and preferred not to
include inside main html file. So, the modal is basically calling the
remote html file.
Your remote html file and your modal file maybe using 2 different instances of the UpdateProjectController.
As said by Martijn, you coud use ui-bootstrap for this but if you don't want to, you could solve it by using a directive.
// directive to open the modal
var app = angular.module('myApp', []);
app.directive('myModal', myModal);
myModal.$inject = [];
function myModal() {
return {
restrict: 'A',
link: link
}
function link($scope, $element, $attributes) {
$element.click(function (event) {
angular.element($attributes.modalId).modal();
});
}
}
app.controller('ModalCtrl', ModalCtrl);
ModalCtrl.$inject = [];
function ModalCtrl() {
$scope.message = 'Please enter valid case number';
$scope.UpdateProject = function(){..do something..};
}
Modal is being invoked from JQuery using .modal('show') method.
So in case you use a button to do this render the modal, you could easily include the directive as an attribute to the modal instead of ng-click()
Lastly, include the modal file in your template file
<body>
<div ng-controller="UpdateProjectController">
// So in case you use a button to do this render the modal,
// you could easily include the directive as an attribute to the modal instead of ng-click()
<a href="javascript:;" my-modal modal-id="#modalUpdateProject">
Update Project
</a>
</div>
<!-- modals -->
<div ng-controller="ModalCtrl">
<ng-include src="'path/to/modal.html'"></ng-include>
</div>
<!-- end modals -->
</body>

$scope updates not shown in Angularjs

$scope doesn't seems to sync with updates in Angularjs.
I update my time values (myst and myet) using ui.bootstrap.timepicker, then when I display userscheds[index] using alert(JSON.stringify($scope.userscheds[index]));, only the original values are displayed. Something I'm missing?
Any help would be appreciated
See my plunker or code below
update #1
Comment from #dgig to remove this. in ng-model="this.myst". Changed to ng-model="myst"
But my $scope still not shown with the updates done
html modal
<div class="container" ng-app="appUserSchedule">
<div ng-controller="CtrlUserSchedule" >
<div class="row">
<ul>
<li ng-repeat="x in userscheds">{{x.week_day}} {{x.time_start}}-{{x.time_end}}
<span ng-click="ctrl.showModal($index)" style="cursor:pointer;">Edit</span>
<span ng-click="ctrl.removeItem($index)" style="cursor:pointer;">Delete</span>
</li>
</ul>
</div>
<!-- Modal -->
<script type="text/ng-template" id="modalContent.html">
<div class="modal-body">
<div class="row">
<div class="col-sm-6">
<timepicker ng-model="myst" hour-step="1" minute-step="15" show-meridian="true"></timepicker>
</div>
<div class="col-sm-6">
<timepicker ng-model="myet" hour-step="1" minute-step="15" show-meridian="true"></timepicker>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="$close()">OK</button>
<button class="btn btn-primary" ng-click="saveUserScheduleEntry()">Save</button>
</div>
js
var app = angular.module("appUserSchedule", ['ui.bootstrap']);
app.controller("CtrlUserSchedule", function($scope,$http,$location,$modal) {
$scope.ctrl = this;
$http.get('userschedule.json').success(function(data, status, headers, config) {
$scope.userscheds = data.userschedules;
//console.log(data);
}).error(function(data, status, headers, config) {
console.log("No data found..");
});
// Show modal
this.showModal = function (index) {
var modalInstance;
modalInstance = $modal.open({
templateUrl: 'modalContent.html',
controller: 'CtrlUserSchedule',
scope: $scope
});
objts = new Date($scope.userscheds[index].datetime_start);
objte = new Date($scope.userscheds[index].datetime_end);
$scope.myst = objts;
$scope.myet = objte;
// Save User Schedule Entry details after making a change, then close modal
$scope.saveUserScheduleEntry = function() {
// Displays original value, but where are my updated values?
alert(JSON.stringify($scope.userscheds[index]));
$http.put('userschedule.json',index).success(function(eventsuccess){
}).error(function(err){
/* do something with errors */
});
modalInstance.close();
};
}
json
{
"userschedules":[
{
"id":1,
"week_day":"Monday",
"datetime_start":"2016-03-08T08:00:00-05:00",
"datetime_end":"2016-03-08T12:00:00-05:00",
"time_start":"08:00",
"time_end":"12:00"
},
{
"id":21,
"week_day":"Monday",
"datetime_start":"2016-03-08T13:00:00-05:00",
"datetime_end":"2016-03-08T17:00:00-05:00",
"time_start":"13:00",
"time_end":"17:00"
}, ...

Unable to pass AngularJS variable to div modal in Bootstrap

I'm trying to build an image gallery where any image when clicked, opens up in an expanded modal box (Bootstrap 3). I've created the div that handles the thumbnail view and the modal dialogue as a template wherein the values are filled using a custom script written in AngularJS.
The problem is, I'm unable to pass the values into the modal dialogue. The thumbnail part of the code works fine but upon clicking the individual images, the values aren't read from the script. This is the HTML code I'm working with:
<div class="isotope-container row grid-space-20">
<div class="col-sm-6 col-md-3 isotope-item int-design" ng-repeat="photopost in postCntrl.posts">
<div class="image-box">
<div class="overlay-container">
<img ng-src="{{photopost.photoThumbnailSrc}}" class="img-responsive" alt="">
<a class="overlay" data-toggle="modal" data-target="#project-1">
<i class="fa fa-search-plus"></i>
<span>{{photopost.photoCategory}}</span>
</a>
</div>
<a class="btn btn-default btn-block" data-toggle="modal" data-target="#project-1">{{photopost.photoSubTitle}}</a>
</div>
<!-- Modal -->
<div class="modal fade" id="project-1" tabindex="-1" role="dialog" aria-labelledby="project-1-label" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="project-1-label">{{photopost.photoCaption}}</h4>
</div>
<div class="modal-body">
<img ng-src="{{photopost.photoSrc}}"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal end -->
</div>
</div>
This is the script written using Angular:
(function(){
var postGeneratorApp = angular.module('PhotoPostGenerator', []);
postGeneratorApp.controller('PhotoPostController', function() {
this.posts = photoposts;
this.numOfPosts = 20;
});
var photoposts =
[
{
photoCaption: "This is an image",
photoSubTitle: "Tree",
photoTimestamp: 'Aug 23, 2015',
photoCategory: "landscape",
photoSrc: "../images/gallery/img1.jpg",
photoThumbnailSrc: "../images/gallery/img1_th.jpg",
},
{
photoCaption: "This is also an image",
photoSubTitle: "Bird",
photoTimestamp: 'Sep 23, 2015',
photoCategory: "bird",
photoSrc: "../images/gallery/img2.jpg",
photoThumbnailSrc: "../images/gallery/img2_th.jpg",
},
{...} //more entries such as these
];
})();
This is what the gallery thumbnails look like (please ignore the captions on the thumbnails, they are from an earlier snapshot):
And this is what the modal dialogue looks like, when clicked:
As you can see the caption and the expanded image are missing (photoCaption and photoSrc). When looking for answers I came across AngularUI for Bootstrap but wasn't sure how to use this or if there was a simpler fix available for my current code.

EDIT 1
Look this: http://jsfiddle.net/mamor/4KBWj/embedded/
In the controller main, when opener the modal use the parameter 'resolve' for pass values between conttroler main and modal. In the modal use the name parameter passed in modalInstance when open.
myApp.controller('MainController', ['$scope', '$modal', function ($scope, $modal) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'modal.html',
controller: 'ModalInstanceCtrl',
resolve: {
params: function () {
return {
key: 'value',
key2: 'value2'
};
}
}
});
modalInstance.result.then(
function (result) {
console.log('called $modalInstance.close()');
alert(result);
},
function (result) {
console.log('called $modalInstance.dismiss()');
alert(result);
}
);
};
});
Now uses de params in modal controller for obtains values of main controller.
myApp.controller('ModalController', ['$scope', '$modalInstance', 'params', function ($scope, $modalInstance, params) {
console.log(params); /* This params of MainController */
$scope.ok = function () {
$modalInstance.close('this is result for close');
};
$scope.cancel = function () {
$modalInstance.dismiss('this is result for dismiss');
};
}]);
EDIT 2
Add in the element call this: "ng-click='clickedElement = photopost'"
<div class="image-box">
<div class="overlay-container">
<img ng-src="{{photopost.photoThumbnailSrc}}" class="img-responsive" alt="">
<a class="overlay" ng-click="clickedElement = photopost" data-toggle="modal" data-target="#project-1">
<i class="fa fa-search-plus"></i>
<span>{{photopost.photoCategory}}</span>
</a>
</div>
<a class="btn btn-default btn-block" ng-click="clickedElement = photopost" data-toggle="modal" data-target="#project-1">{{photopost.photoSubTitle}}</a>
</div>
After, in the modal acess metada of target use 'clickedElement' for acess the data.
<div class="modal-header">
{{clickedElement}}
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="project-1-label">{{clickedElement.photoCaption}}</h4>
</div>