如何在 angularjs 中添加 visjs 事件？

Question

在visjs doc there is a stabilizationProgress event which I need to enable in my angularjs project. I have created a plunker demo中也是如此。

我尝试了类似下面的方法，但不确定如何使用 angularjs 添加进度条。这是一个link to give an idea

<vis-network data="data" options="options" events="events"></vis-network>

控制器代码

$scope.events = [{
    stabilizationProgress: function (obj) {

    },
    stabilizationIterationsDone: function () {

    }
}];

Answer 1

启用 directive 将在 angular 和 vis 之间传输数据。 vis 的每个特征都可以在 angular 上模拟，将 vis 集成到它的 $digest 循环中。

指令用于处理 DOM manipulation 以及与 vis.

等第三方插件的集成

例如，如果你想在 vis 告诉某事时更新一些东西，你可以像下面这样实现（假设 vis.event() 是来自 vis API):

/* On directive's link() function */

vis.event('bla-bla-bla', function (arg1, arg2, arg3) {
    scope.$evalAsync(function () {
        scope.emit('vis:bla-bla-bla', arg1, arg2, arg3);
    });
});

在您的控制器上，您可以收听此事件：

// On a parent controller where the directive is placed
//
// The $scope below can be $scope too,
// but it will traverse all child scopes first
$scope.$on('vis:bla-bla-bla', function ($event, arg1, arg2, arg3) {
    $event.stopPropagation(); // Useful, to avoid performance leak

    console.log($event, arg1, arg2, arg3);
});

编辑 1：

我读了一些您指出的 Plunkr：

http://plnkr.co/edit/XlRkfazfYBmj0GM1PTeC?p=info

事件系统已经存在，您缺少 vis-network 元素上的属性，即 events 元素，需要绑定的事件。

我建议您注释掉其中的一些并每次取消注释一个以查看它是否有效。目前，他们都处于活动状态并正在登录控制台！

Answer 2

在您的控制器中，您定义了一个应在触发事件时执行的回调方法，例如：

function actOnEvent($event){
     window.alert($event. ...);
};

$event 是包含您需要的所有信息的填充事件。然后仍然在您的控制器中，您需要将事件映射到您的函数，例如：

var vm = this;
vm.events = { click: actOnEvent};

并且在您的 html 模板中，例如

<vis-network data="vm.data" options="vm.options" events="vm.events"></vis-network>

如何在 angularjs 中添加 visjs 事件？

How to add visjs events in angularjs?

angularjs

angularjs-directive

vis.js

编辑 1：