将 $scope 放在 Cytoscape 点击事件中

Question

我使用 Cytoscapejs 创建了一个网络图。我正在尝试取消隐藏 div，并在用户单击图形边缘后加载更多内容。

我的控制器中有以下内容：

CytoscapeService.getGraph().on('tap', 'edge[id = "123"]', function (event) {

console.log("Hi")
//Above console printout works.

  //The below does not work on index.html
  $scope.testMessage = "Hello World";
  $scope.showMe = function () {
    $scope.show = true;
  }

  $scope.showMe();

});

// This works though.
//$scope.testMessage = "Hi from outside";

在Index.html中：

<div  ng-controller="MainCtrl" class="container" ng-show="show">

</div>

<div  ng-controller="MainCtrl">
  {{testMessage}}
</div>

console.log 确实打印出来了，但是没有调用带有函数的 $scope.showMe。但是，如果我将范围移到该子句之外，移到控制器的主子句中，它就可以工作。

有没有关于我如何实现这一目标的替代方案？

Answer 1

当您使用 jquery 事件更新 $scope 值时，这在 angular 中很常见。您将必须手动触发 $scope apply:

$scope.$apply(function(){
    $scope.show = true;
});

另一个解决方案是使用 Angular 的 $timeout

$timeout(function () {
    $scope.show = true;
});

请参阅 $scope.apply() and more scope information 的文档。

将 $scope 放在 Cytoscape 点击事件中

Putting $scope in Cytoscape click event

javascript

angularjs

cytoscape.js