所以我是AngularJS和NodeJS的新手，尝试使用http://l-lin.github.io/angular-datatables/#/angularWayDataChange
创建一个简单的ng-tableApp.js
var app=angular.module('two_way',['datatables', 'ngResource']);
这是控制器，
app.controller('two_way_control',function($resource,$scope,$http,$interval){
load_pictures();
load_platform_metadata();
load_platform_values();
load_metadata_map();
angularWayChangeDataCtrl();
function angularWayChangeDataCtrl($resource, DTOptionsBuilder, DTColumnDefBuilder) {
var vm = this;
vm.persons = $resource('data1.json').query();
vm.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers');
vm.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(0),
DTColumnDefBuilder.newColumnDef(1),
DTColumnDefBuilder.newColumnDef(2),
DTColumnDefBuilder.newColumnDef(3).notSortable()
];
vm.person2Add = _buildPerson2Add(1);
vm.addPerson = addPerson;
vm.modifyPerson = modifyPerson;
vm.removePerson = removePerson;
function _buildPerson2Add(id) {
return {
id: id,
firstName: 'Foo' + id,
lastName: 'Bar' + id
};
}
function addPerson() {
vm.persons.push(angular.copy(vm.person2Add));
vm.person2Add = _buildPerson2Add(vm.person2Add.id + 1);
}
function modifyPerson(index) {
vm.persons.splice(index, 1, angular.copy(vm.person2Add));
vm.person2Add = _buildPerson2Add(vm.person2Add.id + 1);
}
function removePerson(index) {
vm.persons.splice(index, 1);
}
}
我已按正确顺序添加脚本
html文件如下：
<body ng-app="two_way" ng-controller="two_way_control">
<html ng-app="two_way" ng-controller="two_way_control">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Metadata Manager</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-datatables/0.5.4/angular-datatables.min.js"></script>
<link rel="shortcut icon" type="image/png" href="/angular/favicon.png">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.0/css/responsive.dataTables.min.css">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.0/css/responsive.dataTables.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-datatables/0.5.4/css/angular-datatables.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-resource.min.js"></script>
<script type="text/javascript" class="init"></script>
<script src="angular.js"></script>
<script src="app.js"></script>
<script src="core.js"></script>
</head>
<body ng-app="two_way" ng-controller="two_way_control">
<form class="form-inline" ng-submit="showCase.addPerson()">
<table datatable="ng" dt-options="showCase.dtOptions" dt-column-defs="showCase.dtColumnDefs" class="row-border hover">
<thead>
<tr>
<th>
<div class="form-group">
<label>
<input class="form-control" type="number" name="id" ng-model="showCase.person2Add.id" value="">
</label>
</div>
</th>
<th>
<div class="form-group">
<label>
<input type="text" class="form-control" name="firstName" ng-model="showCase.person2Add.firstName" value="">
</label>
</div>
</th>
<th>
<div class="form-group">
<label>
<input type="text" class="form-control" name="lastName" ng-model="showCase.person2Add.lastName" value="">
</label>
</div>
</th>
<th>
<div class="form-group">
<button type="submit" class="btn btn-success"><i class="fa fa-plus"></i></button>
</div>
</th>
</tr>
<tr>
<th>ID</th>
<th>FirstName</th>
<th>LastName</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in showCase.persons">
<td>{{ person.id }}</td>
<td>{{ person.firstName }}</td>
<td>{{ person.lastName }}</td>
<td>
<button type="button" ng-click="showCase.modifyPerson($index)" class="btn btn-warning"><i class="fa fa-edit"></i></button>
<button type="button" ng-click="showCase.removePerson($index)" class="btn btn-danger"><i class="fa fa-trash-o"></i></button>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
我收到TypeError错误：$ resource不是函数。 不确定，我错过了什么。
答案 0 :(得分：0)
在angular.js之后和其他库之前包含angular-resource文件
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-resource.min.js"></script>
答案 1 :(得分：0)
您必须使用相同版本的角度库
的角度资源<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-resource.js"></script>
答案 2 :(得分：0)
使用控制器中的$ resourceProvider更改$ resource。
app.controller('two_way_control',function($resourceProvider,$scope,$http,$interval){
答案 3 :(得分：0)
我终于弄明白了，调用函数函数angularWayChangeDataCtrl的问题。在调用函数时我错过了参数。刚刚将其改为
function angularWayChangeDataCtrl($resource, DTOptionsBuilder, DTColumnDefBuilder)