Home > .NET, Angular, SPA, Vs2013 > Angular modal problem after update

Angular modal problem after update

2015/07/06

I was already prepared to the head banging.
I had a .NET 4.5 project with Angular 1.3.15, reopening for some update i tried an NuGet update and voilà, Angular 1.4.1 available: but no updates for Bootstrap, still 3.3.4 … troubles to the horizon…
The site is essentially an employees management, with add update delete done using modal windows.
After the update apparently all still working until i tried an update (of a record).
The original code was

modalInstance = $modal.open({
    templateUrl: 'app/partials/formemployees.html',
    controller: 'modalController',
    backdrop: "static",
    keyboard: true,
    modalFade: true,
    scope: $scope
})

With this code the modal window was appearing, inside the window no problem for fields editing, but after closing the window by the ESC on the keyboard or the Save button, on the browser canvas a grey background was covering everything: only after an F5 the site was working.
The problem seems related to the BootStrap version not aligned to Angular for the “modal” part; after some struggle i found that the problem is relative to the animation feature.
By adding the clause “animation: false, ” :

modalInstance = $modal.open({
    animation: false,
    templateUrl: 'app/partials/formemployees.html',
    controller: 'modalController',
    backdrop: "static",
    keyboard: true,
    modalFade: true,
    scope: $scope
})

Now the modal is working correctly.

Advertisements
Categories: .NET, Angular, SPA, Vs2013
%d bloggers like this: