在IE11上使用Angular JS导致＆＃34;节点未定义＆＃34;错误。这是剧本。
<html ng-app="app" id="ng-app">
<head>
<title>Show Fruit</title>
<link href="include/styles.css" rel="stylesheet">
<!-- Use Bootstrap -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="include/app.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=11" />
</head>
<body ng-controller="HttpCtrl as app">
<div class="container">
<div class="header">
<h1 class="custom">Actors' Favorite Fruits</h1>
</div>
<div class="leftPanel">
<div class="LeftPanelHeader">{{navTitle}}</div>
<table class="side">
<tr ng-repeat="f in fruits" ng-click="getActor(f.id)">
<td class="side">{{f.name}}</td>
</tr>
</table>
</div>
</div>
</body>
</html>
适用于Firefox和Chrome。检查IE11与Angular JS相关的问题。任何帮助表示赞赏。
Thankx
完成index.jsp
<html >
<head>
<title>Show Fruit</title>
<link href="include/styles.css" rel="stylesheet">
<!-- Use Bootstrap -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular-route.min.js"></script>
<script type="text/javascript" src="include/app.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body ng-app="app">
<!-- <div ng-controller="HttpCtrl as app"> -->
<div class="container">
<div class="header">
<h1 class="custom">Actors' Favorite Fruits</h1>
</div>
<div class="leftPanel">
<div class="LeftPanelHeader">{{navTitle}}</div>
<table class="side">
<tr ng-repeat="a in actors" ng-click="getActor(a.id)" >
<td class="side">{{a.name}}</td>
</tr>
</table>
</div>
<div class="RightPanel">
<image src="{{actor.image}}" width="220">
</div>
<div class="MainBody">
<form>
<table>
<tr>
<td><input type="text" ng-model="searchName" size="30"></td>
<td><button type="button" ng-click="searchActor(searchName)" class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-search"></span> Search </button></td>
<td><button ng-click="addNew()" class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-plus"></span> Add New </button></td>
<td><button ng-click="resetSearch()" class="btn btn-info btn-sm">
<span class="glyphicon glyphicon-refresh"></span> Reset Search </button></td>
</tr>
</table>
</form>
<form id="main">
<table>
<tr>
<td class="display_bold"><label for="actor.name">ID:</label></td>
</tr>
<tr>
<td class="display"><input id="id" type="text" ng-model="actor.id" size="4"></td>
</tr>
<tr>
<td class="display_bold"><label for="name">Fruit:</label></td>
</tr>
<tr>
<td class="display"><input type="text" ng-model="actor.name" size="30"></td>
</tr>
<tr>
<td class="display_bold"><label for="name">Favorite Fruit Of:</label></td>
</tr>
<tr>
<td class="display"><input type="text" ng-model="actor.birthName" size="40"></td>
</tr>
<tr>
<td class="display_bold"><label for="name">Birth Date:</label></td>
</tr>
<tr>
<td class="display"><input type="text" ng-model="actor.birthDate" size="20"></td>
</tr>
<tr>
<td class="display_bold"><label for="name">Email:</label></td>
</tr>
<tr>
<td class="display"><input type="text" ng-model="actor.email" size="30"></td>
</tr>
<tr>
<td class="display_bold"><label for="name">Image:</label></td>
</tr>
<tr>
<td class="display"><input type="text" ng-model="actor.image" size="80"></td>
</tr>
<tr>
<td class="display_bold"><label for="name">IsActive:</label></td>
</tr>
<tr>
<td class="display"><input type="text" ng-model="actor.active" size="10"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<table>
<tr>
<td><button ng-click="saveActor(actor.id)" class="btn btn-success btn-sm" title="Save actor's details..." ng-disabled="isSaveDisabled">
<span class="glyphicon glyphicon-plus"></span> Save </button></td>
<td><button ng-click="deleteActor(actor.id)" class="btn btn-danger btn-sm" ng-disabled="isDeleteDisabled">
<span class="glyphicon glyphicon-trash"></span> Delete </button></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
<div class="footer">AngularJS Demo </div>
</div>
</body>
完成app.js
(function() {
var app = angular.module("app", ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'index.jsp',
controller: 'HttpCtrl'
})
.otherwise({
redirectTo: '/homev'
});
});
app.controller("HttpCtrl", function($scope, $http) {
var app = this;
$scope.navTitle = 'All Stars';
$scope.operation="";
$scope.isSaveDisabled = true;
$scope.isDeleteDisabled = true;
var response = $http.get('/AngularWs/rest/actors/');
response.success(function(data) {
$scope.actors = data;
console.log("[main] # of items: " + data.length)
angular.forEach(data, function(element) {
console.log("[main] actor: " + element.name);
});
})
response.error(function(data, status, headers, config) {
alert("AJAX failed to get data, status=" + status);
})
$scope.getActor = function(id) {
var response = $http.get('/AngularWs/rest/actors/'+ id );
response.success(function(data) {
$scope.actor = data;
$scope.operation="update";
$scope.isSaveDisabled = false;
$scope.isDeleteDisabled = false;
})
response.error(function(data, status, headers, config) {
alert("AJAX failed to get data, status=" + status);
})
};
$scope.searchActor = function(name) {
var app = this;
$scope.navTitle = 'Search Criteria';
var response = $http.get('/AngularWs/rest/actors/search/' + name);
response.success(function(data) {
$scope.actors = data;
$scope.$apply();
console.log("[searchActor] # of items: " + data.length)
angular.forEach(data, function(element) {
console.log("[searchActor] actor: " + element.name);
});
});
response.error(function(data, status, headers, config) {
alert("AJAX failed to get data, status=" + status);
})
};
$scope.clearForm = function() {
$scope.actor = {
id:'',
name:'',
birthName:'',
birthDate:'',
email:'',
image:'',
active:''
};
}
$scope.addNew = function(element) {
$scope.operation="create";
$scope.clearForm();
main.id.focus();
$scope.isSaveDisabled = false;
$scope.isDeleteDisabled = true;
}
$scope.saveActor = function(id) {
$scope.jsonObj = angular.toJson($scope.actor, false);
console.log("[update] data: " + $scope.jsonObj);
if ($scope.operation == "update") {
var response = $http.put('/AngularWs/rest/actors/' + id, $scope.jsonObj);
response.success(function(data, status, headers, config) {
$scope.resetSearch();
});
response.error(function(data, status, headers, config) {
alert("AJAX failed to get data, status=" + status);
})
} else if ($scope.operation == "create") {
var response = $http.post('/AngularWs/rest/actors/add', $scope.jsonObj);
response.success(function(data, status, headers, config) {
$scope.resetSearch();
});
response.error(function(data, status, headers, config) {
alert("AJAX failed to get data, status=" + status);
})
}
};
$scope.deleteActor = function(id) {
var response = $http.delete('/AngularWs/rest/actors/' + id);
response.success(function(data, status, headers, config) {
$scope.resetSearch();
});
response.error(function(data, status, headers, config) {
alert("AJAX failed to get data, status=" + status);
})
};
$scope.resetSearch = function(name) {
var app = this;
$scope.operation="";
$scope.clearForm();
$scope.isSaveDisabled = true;
$scope.isDeleteDisabled = true;
$scope.navTitle = 'All Stars';
$scope.searchName = '';
var response = $http.get('/AngularWs/rest/actors/');
response.success(function(data) {
$scope.actors = data;
$scope.$apply();
console.log("[resetSearch] # of items: " + data.length)
});
response.error(function(data, status, headers, config) {
alert("AJAX failed to get data, status=" + status);
})
};
});
})();
答案 0 :(得分：3)
我遇到了同样的问题并找到了解决方案。在我的情况下，我正在使用从本地（Intranet）服务器运行的应用程序进行测试，IE11设置为在＆＃34;兼容性视图＆＃34;中运行内部网站点。模式。改变使问题消失。
要执行此操作，只需单击齿轮图标，然后选择＆＃34;兼容性视图设置＆＃34;从菜单中。在出现的对话框中，确保＆＃34;在兼容性视图中显示Intranet站点＆＃34;未选中并关闭它。