Question

所以我是AngularJS和NodeJS的新手，尝试使用http://l-lin.github.io/angular-datatables/#/angularWayDataChange

创建一个简单的ng-table

App.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);
    }
}

我已按正确顺序添加脚本

Jquery的
AngularJS
AngularJS Route
AngularResource

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不是函数。不确定，我错过了什么。

Answer 1

在angular.js之后和其他库之前包含angular-resource文件

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-resource.min.js"></script>

Answer 2

您必须使用相同版本的角度库

的角度资源

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-resource.js"></script>

Answer 3

使用控制器中的$ resourceProvider更改$ resource。

app.controller('two_way_control',function($resourceProvider,$scope,$http,$interval){

Answer 4

我终于弄明白了，调用函数函数angularWayChangeDataCtrl的问题。在调用函数时我错过了参数。刚刚将其改为

 function angularWayChangeDataCtrl($resource, DTOptionsBuilder, DTColumnDefBuilder)

TypeError：$ resource不是函数

4 个答案: