I am unable to change scope values using angular js when using bootstrap modal. Basically I am calling function to open modal that I store in controller.js file and then I am trying to amend scope values and display them in modal dialog box.
I added click event to one of my js components.
eventClick: function(event, element) {
var $scope = angular.element("#eRotaController").scope();
$scope.OpenModal("addEventModal", false, event);
}
Part of html element (modal dialog):
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{misc.modalTitles}}</h4>
</div>
Finally OpenModal function and variables
// Variables
$scope.misc = {
modalTitle: "",
showRemoveEvent : false
};
$scope.OpenModal = function (modal, isNew, event)
{
if (isNew) {
$scope.misc.modalTitle = "Add new Event";
}
else{
$scope.misc.modalTitle = "Update event for: " + event.title;
$scope.misc.showRemoveEvent = true;
console.log($scope);
}
$("#" + modal).modal('show');
}
When I update modalTitle for instance inside OpenModal function it does not reflect any changes when opening modal.
I created simpler example to find out if it's modal issue and turns out it's not.
Quick test that I have added :
<button ng-click="OpenModal2()"></button>
{{misc.showRemoveEvent}}
$scope.OpenModal2 = function()
{
$scope.misc.modalTitle = "Update event for: " + event.title;
$scope.misc.showRemoveEvent = true;
}
That works fine.
So it works correctly when method is called directly from html element but fail when called from js using reference to controller :
var $scope = angular.element("#eRotaController").scope();
$scope.OpenModal("addEventModal", false, event);
Does not work
Try doing:
eventClick: function(event, element) {
var $scope = angular.element("#eRotaController").scope();
$scope.$apply(function (){
$scope.OpenModal("addEventModal", false, event);
})
},
If eventClick is a function outside of angular context then the above code may work.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments