ng-repeat 项目仅在分页点击后出现

Question

我是 Javascript-Meanstack 的新手，我想和我的朋友一起实施一个项目。我们目前正在开发一个应该实现 d3.js 的网络嗅探器。我们想以图形方式绘制网络流量。该应用程序还使用 pcap-module from npm. We also use MongoDB for the database and the structure of the whole app was designed with the yeoman generator (generator -> http://meanjs.org/generator.html)。（我目前正在用德语进行开发，所以请不要怀疑变量名是否很奇怪！）

目前我们可以通过为它们创建会话来将我们的数据包保存到我们的数据库中。代码在 /server.js.

中可用

pcap = require('pcap'),
pcap_session = pcap.createSession('en1', 'ip');

在需要 pcap 模块后，我们将数据包保存到我们的集合中，也命名为 packets，此代码也在 /server.js.

mongoose.createConnection('mongodb://localhost/scream-dev');

var packetSchema = new mongoose.Schema({
    any: mongoose.Schema.Types.Mixed
});
var Pakete = mongoose.model('packets', packetSchema);

pcap_session.on('packet', function (raw_packet) {
    var packet_ip = pcap.decode.packet(raw_packet);

    var paket = new Pakete({
        any: packet
    });

    paket.save(function (err, paket) {
        if (err) return console.error(err);
        //console.log('Saved a IP Packet!');
    });
    //console.log(packet_ip);
});

目前一切都很好，如果我们查看我们的数据包集合，我会发现（在足够的时间后，有一些！！）采用这种方案的数据包：

{
    "_id" : ObjectId("5534c9c538ebe8617b5ae35c"),
    "any" : {
        "link_type" : "LINKTYPE_ETHERNET",
        "pcap_header" : {
            "tv_sec" : 1429522885,
            "tv_usec" : 846102,
            "caplen" : 145,
            "len" : 145
        },
        "payload" : {
            "dhost" : {
                "addr" : [ 
                    104, 
                    168, 
                    109, 
                    69, 
                    154, 
                    194
                ]
            },
            "shost" : {
                "addr" : [ 
                    164, 
                    147, 
                    76, 
                    194, 
                    149, 
                    78
                ]
            },
            "ethertype" : 2048,
            "vlan" : null,
            "payload" : {
                "version" : 4,
                "header_length" : 5,
                "header_bytes" : 20,
                "diffserv" : 0,
                "total_length" : 131,
                "identification" : 10167,
                "flags" : {
                    "reserved" : 0,
                    "df" : 0,
                    "mf" : 0
                },
                "fragment_offset" : 0,
                "ttl" : 51,
                "protocol" : 6,
                "header_checksum" : 56601,
                "saddr" : {
                    "o1" : 173,
                    "o2" : 194,
                    "o3" : 122,
                    "o4" : 22
                },
                "daddr" : {
                    "o1" : 192,
                    "o2" : 168,
                    "o3" : 154,
                    "o4" : 35
                },
                "protocol_name" : null,
                "payload" : {
                    "sport" : 443,
                    "dport" : 51541,
                    "seqno" : 4050575809,
                    "ackno" : 3439177583,
                    "data_offset" : 8,
                    "header_bytes" : 32,
                    "reserved" : 0,
                    "flags" : {
                        "cwr" : 0,
                        "ece" : 0,
                        "urg" : 0,
                        "ack" : 1,
                        "psh" : 1,
                        "rst" : 0,
                        "syn" : 0,
                        "fin" : 0
                    },
                    "window_size" : 1653,
                    "checksum" : 55427,
                    "urgent_pointer" : 0,
                    "options" : {
                        "mss" : null,
                        "window_scale" : null,
                        "sack_ok" : null,
                        "sack" : null,
                        "timestamp" : 973486614,
                        "echo" : 1190534572
                    },
                    "data" : { "$binary" : "FwMDAEoAAAAAAAABDDepuDqq89CSU3Qi2+AY8FFmXoNq4uSCD0e34q7nOEZVJ1+0RLj8JAEw30z5p8wEj    fBgaFzbgBWn3z9LA5CmySlNDg==", "$type" : "00" },
                    "data_bytes" : 79
                }
            }
        }
    },
    "__v" : 0
}

一切都很好。现在我们要添加数据包，首先只在 tables 内添加 ng-repeat 到我们的前端。我们还想添加一个搜索，在 table 的 EVERY 列中搜索。分页也以实验方式添加。

在我们的模块文件夹/public/modules/network（网络是我们自己的模块）/public/modules/network/controllers/network.client.controller.js 是这样写的：

'use strict';
angular.module('network').factory('Packets', ['$resource',
 function ($resource) {
    return $resource('network/:packetId', {
        packetId: '@_id'
    }, {
        update: {
            method: 'PUT'
        }
    });
 }
]);

angular.module('network')
    .controller('NetworkController', ['$scope', '$stateParams', '$location', 'Authentication', 'Packets',
     function ($scope, $stateParams, $location, Authentication, Packets) {


            $scope.authentication = Authentication;

            $scope.packets = Packets.query();

            $scope.filteredTodos = [];
            $scope.currentPage = 1;
            $scope.numPerPage = 16;
            $scope.maxSize = 20;
            $scope.todos = [];
            $scope.todos = $scope.packets;

            $scope.$watch('currentPage + numPerPage', function () {
                var begin = (($scope.currentPage - 1) * $scope.numPerPage),
                    end = begin + $scope.numPerPage;

                $scope.filteredTodos = $scope.todos.slice(begin, end);
             });

如果我猜对了，根据我们的 /public/modules/network/views/network.client.view.html 中的 ng-repeat 代码必须如下所示到 Packet.query() - 代码行，还是？:

<div data-ng-controller="NetworkController">
<div>
    <table class="table table-striped table-condensed table-hover">
        <thead>
            <tr>
                <th class="id" custom-sort order="'id'" sort="sort">Object Id&nbsp;</th>
                <th class="name" custom-sort order="'name'" sort="sort">saddr&nbsp;</th>
                <th class="description" custom-sort order="'description'" sort="sort">daddr&nbsp;</th>
                <th class="field3" custom-sort order="'field3'" sort="sort">protocol&nbsp;</th>
                <th class="field4" custom-sort order="'field4'" sort="sort">sport&nbsp;</th>
                <th class="field5" custom-sort order="'field5'" sort="sort">dport&nbsp;</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in filteredTodos track by item.id | filter:search">
                <td>{{item._id}}</td>
                <td>{{item.any.payload.payload.saddr.o1}}.{{item.any.payload.payload.saddr.o2}}.{{item.any.payload.payload.saddr.o3}}.{{item.any.payload.payload.saddr.o4}}</td>
                <td>{{item.any.payload.payload.daddr.o1}}.{{item.any.payload.payload.daddr.o2}}.{{item.any.payload.payload.daddr.o3}}.{{item.any.payload.payload.daddr.o4}}</td>
                <td>{{item.any.payload.payload.protocol_name}}</td>
                <td>{{item.any.payload.payload.payload.sport}}</td>
                <td>{{item.any.payload.payload.payload.dport}}</td>
            </tr>
        </tbody>
        <pagination ng-model="currentPage" total-items="todos.length" max-size="maxSize" boundary-links="true">
        </pagination>
        <br>
        <input type="text" ng-model="search.$" />
    </table>
</div>
</div>

我们已经想通了，如果在 tablerow 元素上添加 track by item._id上面的代码，搜索不完全工作，如果 track by.. 部分工作（我们无法过滤点“。” ??)

无论如何...我们现在有两个问题：

首先：为什么 table 只在我们点击另一个页码时显示结果？（页码本身不断刷新）

第二：我们如何才能像 table 一样在同一页面上显示 d3.js 图表？我们用bower install --save安装了d3和nvd3，还在/config/env/all.js中添加了依赖 喜欢“'public/lib/d3/d3.min.js'”或“'public/lib/d3/d3.js'”。在我们的 /public/config.js 中，我们还向我们的 applicationModuleVendorDependencies 添加了 'd3' 和 'nvd3' 但它总是 returns一个错误：

Error: [$injector:nomod] Module 'd3' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

我们也曾尝试在控制器内部使用一个指令，但是 returns 另一个错误：

Unknown Provider <- d3 <- d3BarsProvider

如果您能帮助我提供任何代码或想法，那就太好了。我们已经为此问题努力了数周。

Answer 1

首先，根据ng-repeat documentation：

if filters are used in the expression, they should be applied before the tracking expression.

因此你的表达式变成：

item in filteredTodos | filter:search track by item.id

其次，D3库在window上公开。它不是 Angular 的一部分。您有三个选择：

直接使用D3，无需注入。
像这样注入$window：function ($window) { var d3 = $window.d3; }
自己提供，比如：angular.module('yourApp').constant('d3', d3);

我会推荐 #3，因为它更容易在单元测试中进行模拟。

ng-repeat 项目仅在分页点击后出现

ng-repeat items only appear after pagination click

pagination

real-time

d3.js

angularjs

mean-stack