AngularJs:节点未定义
AngularJs: Node is undefined
在IE11上使用Angular JS会导致"节点未定义"错误。这是脚本。
<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上工作正常。到处检查与 Angular JS 的 IE11 相关问题。任何帮助，不胜感激。
谢谢
完整索引.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>
完整的应用程序.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);
})
};
});
})();
我遇到了同样的问题并找到了解决方案。就我而言，我正在使用从本地（内部网）服务器运行我的应用程序进行测试，并且IE11设置为在"兼容性视图"模式下运行内部网站。改变这一点使问题消失了。
为此，只需单击齿轮图标，然后从菜单中选择"兼容性视图设置"。在出现的对话框中，确保未选中"在兼容性视图中显示 Intranet 站点"并将其关闭。
相关文章：
- 节点fs.stat名称未定义
- 如何解决'窗口未定义'终端上的节点JS出错
- 未定义应为节点模块的对象
- 节点.js在不可能的地方打印“未定义”
- 节点.js未捕获的异常类型错误:无法设置未定义的预处理 ''
- 节点.js + Express - 在完成之前返回未定义的回调
- 访问节点js中对象内部的数组-未定义
- 未定义节点不是server.js文件中的函数
- 节点JSON https请求未定义
- 节点0.10中未定义Process.domain
- define未定义Javascript节点
- 不能调用未定义节点.js的方法“forEach”
- 未定义平均堆栈节点要求
- 尝试解析的 JSON 未定义节点
- 节点.js 使用 Multer 上传图像显示未定义
- 节点.js未定义:1 [语法错误:输入意外结束]
- 尝试添加到根父节点时出现 KendoUI 未定义节点问题
- 无法读取未定义 - 节点.js的属性“父级”
- 需要时未定义节点模块
- request.body.email 是使用 http.get 的未定义节点 js 服务器端
