Menu
I have a basic directive in a MVC 5 Layout Page with a directive for searching. My problem is that the templateUrl cannot be loaded (400 error). If I enter the URL directly into the browser, I can load the html page without difficulty or error. I cannot find out why the AJAX call to load the page is failing.
Chrome Debugger
This is the HTML page loading in Chrome
app.js
(function() {
var app = angular.module("mainApp");
app.directive("basicSearch", function() {
return {
templateUrl: 'app/directives/basic-search.html',
controller: function($scope, search) {
$scope.keyword = '';
$scope.exact = false;
$scope.submitSearch = function () {
search.searchByKeyword($scope.keyword, 0, $scope.exact);
}
}
}
});
}());
basic-search.html
<div>
<input type="search" ng-model="keyword" name="keyword" />
<button type="submit" ng-click="submitSearch()"></button>
<input type="checkbox"ng-model="exact" name="exact" />
<label for="exact">Exact Match?</label>
</div>
_Layout.cshtml
<html>
<head>
<base href="@Request.ApplicationPath" />
<!--- JS & CS References -->
<title></title>
</head>
<body ng-app="mainApp">
<!-- Other stuff -->
<basic-search></basic-search>
<!-- More other stuff -->
@RenderBody()
</body>
</html>
EDIT
Here is the successful request (via browser):
and here is the one that fails (via Angular directive):
838
The IE bug that Chris is referring to is a caching error that allows old content to be re-served when using angular's $http and IE.
I've written about the subject here: http://benjii.me/2014/07/ie-is-caching-my-angular-requests-to-asp-net-mvc/
A better fix than removing the bug-fix code is to fix it. Use the following instead:
//initialize get if not there
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}
//disable IE ajax request caching
$httpProvider.defaults.headers.get["If-Modified-Since"] = "Fri, 01 Jan 2010 00:00:00 GMT";
I solved it. It seems someone added the following to the module config as an attempt to resolve an IE bug (surprise, surprise):
//initialize get if not there
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}
//disable IE ajax request caching
$httpProvider.defaults.headers.get["If-Modified-Since"] = "0";
I removed it, cleared out my cache and it's working fine.
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With