0
У меня есть приложение angularjs, где я использую ng-приложение для div, а не html.Angularjs не работает при использовании IE 9
Приложение работает отлично в IE> = 10 и хром, FF.
В IE 9 ни один из ng-кода не выполняется, точка останова не вводит мои пользовательские угловые скрипты, а html показывает {{}}.
Похоже, что angularjs не загружается.
Я попытался вручную с помощью самонастройки
$(document).ready(function() {
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById("HomeGrid"), ['ngGridApp']);Выполнение этого не показывает {{}} больше, но никакие данные не поступают.
Я получаю данные с помощью $ HTTP GET, как этого
var User = $("#UserID").text();
$http({
method: 'POST',
url: '/Home/GetData/',
data: { UserName: $("#UserID").text() }
}).success(function (data) {
$scope.GridData = angular.fromJson(data);
});Angularjs 1.3.2
_Layout.cshtml
<!DOCTYPE html>
<html lang="en" xmlns:ng="http://angularjs.org" >
<head>
<meta charset="utf-8" />
<title></title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<!--[if lte IE 9]>
<script src="xdomain.js" slave="http://example.org/proxy.html"></script>
<![endif]-->
@Scripts.Render("~/bundles/Angular")
@Scripts.Render("~/bundles/modernizr")
@Styles.Render("~/Angular/css")
<script src="~/Scripts/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript">
$.ajaxSetup(
{
cache: false
});
$(document).ready(function() {
$(".openPopup").live("click", function (e) {
e.preventDefault();
$("#PopUp").addClass("dialog")
.attr("id", $(this)
.attr("data-dialog-id"))
.appendTo("body")
.dialog({
title: $(this)
.attr("data-dialog-title"), close: function() {
//$(this).remove();
}, modal: true, height: 400, width: 900
}).load(this.href);
});
$(".close").live("click", function (e) {
$(this).closest(".dialog")
.dialog("close");
window.location.reload();
});
});
</script>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="~/Home/Index" class="navbar-logo">
<img src="@Url.Content("~/Images/xs.png")">
<span>BillPrep</span>
</a>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"></ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" aria-expanded="false" class="dropdown-toggle" data-target="#" href="#">
<strong>@Html.Action("LoginDisplay", "Home", new { Name = User.Identity.Name })</strong> <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">User Settings</a></li>
<li><a href="#">System Settings</a></li>
<li>@Html.ActionLink("Sign Out", "Logout", "Home")</li>
</ul>
</ul>
</div>
</div>
</nav>
<div>
@RenderSection("featured", required: false)
@RenderBody()
</div>
Homepage.cshtml
<script src="~/Scripts/angularjs/stacktrace.js"></script>
<script type="text/javascript">
$(document).ready(function() {
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById("HomeGrid"), ['ngGridApp']);
// angular.bootstrap(document.getElementById("tabgrid"));
});
});
</script>
<div>
<body ng-controller="ngGridController" id="HomeGrid">
<style>
#myTabs div li.active a {
background-color: lightsteelblue;
}
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
}
.bold {
color: black;
font-weight: bold;
}
</style>
<div ng-controller="TabsDemoCtrl" data-ng-init="init()" id="tabgrid">
<div id="UserID" ng-show="false">{{User}}</div>
<loading></loading>
<br />
<tabset ng-show="{{show1}}">
<tab id="Inbox" active="isFirstActive">
<tab-heading>
<span class="glyphicon glyphicon-inbox" aria-hidden="true"></span>
Inbox
</tab-heading>
<div class="ngGridStyle" ng-grid="ngGridViewInbox"></div>
</tab>
<tab id="pending" active="isSecondActive">
<tab-heading>
<span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
show2
</tab-heading>
<div class="ngGridStyle" ng-grid="ngGridView2" ng-show={{show2}}></div>
</tab>
JS файл
var app = angular.module('ngGridApp', ['ngGrid', 'ui.bootstrap', 'logToServer'])
.directive('loading', function() {
return {
restrict: 'E',
replace: true,
template: '<div class="loading"><img src="http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_blue_512.gif" width="20" height="20" />LOADING...</div>',
link: function (scope, element, attr) {
scope.$watch('loading', function (val) {
if (val)
$(element).show();
else
$(element).hide();
});
}
}
})
TabsDemoCtrl.$inject = ["$scope", "$window"];
angular.module('ngGridApp').controller('TabsDemoCtrl', TabsDemoCtrl);
function TabsDemoCtrl($scope, $window) { $scope.User = ""; }
ngGridController.$inject = ["$scope", "$http", "$interval"];
app.controller('ngGridController', ngGridController);
function ngGridController($scope, $http, $interval) {
$scope.callAtInterval = function() {
var User = $("#UserID").text();
$http({
method: 'POST',
url: '/Home/GetData/',
data: { UserName: $("#UserID").text() }
}).success(function (data) {
$scope.GridData = angular.fromJson(data);
});
Проверьте вашу страницу с инструментами разработчика - консоль для поиска ошибок. Также взгляните на эту ссылку: https://docs.angularjs.org/guide/ie –
Это ошибка, которая появляется, но всего несколько раз, в основном, на консоли вообще нет ошибки. «SignalR: соединение должно быть запущено до отправки данных. Вызовите .start() перед .send() angularjs» – user2412146
Не могли бы вы разместить наиболее полную часть своего кода (view и js)? Есть несколько вопросов, на которые можно ответить, глядя на ваш код. –