JavaScript 访问 Angular 范围返回 "undefined" - 异步问题？

Question

问题：我正在尝试从服务器获取一些数据来填充细胞景观图。当我从 javascript 访问范围时，它是未定义的。

尽管他们有很多关于这个/类似问题的帖子。我很难找到有关如何解决从 javascript 文件访问范围的问题的解释，一旦数据准备就绪（如果这是我遇到的问题）。

我读到 http.get 方法是异步的？所以他们在执行后不会阻止任何东西。我想这就是当我访问范围时导致未定义错误的原因，因为数据还没有 returned？我已经找到了一些关于此的信息，但无法弄清楚该用什么来解决这个问题。我可以在 HTML 中使用 angular 花括号以通常的方式访问数据并且它有效。当我只是 return 来自控制器的一些数据时它也有效。

如果有人能指出正确的方向，我将不胜感激。

这是我正在尝试运行的 javascript 文件，它获取范围并将节点添加到 cytoscape 图。

<script type="text/javascript">
    window.onload = function() {
        nodes = angular.element(document.querySelector('[ng-controller="DataController"]')).scope().nodes;
        alert(nodes);
        cy.add(nodes);
    }
</script>

2。从控制器调用工厂方法。

dataFactory.getNodes().then(function(data)
    {
        $scope.nodes = data;
    });

3。 http.get 来自工厂

_service.getNodes = function()
    {
        return $http.get(urlBase + "/nodes");
    };

4。 node.js return 一些 'nodes' 添加到 cytoscape 图

router.get('/api/data/nodes', function(req, res) {
        console.log('sending some data');
        var data = [
            ...
            ];
        res.status(200).json(data);
    });

我看到 "promises" 提到了，所以我想接下来我会朝那个方向前进...

谢谢

Answer 1

您正在尝试在加载 DOM (window.onload) 并且尚未返回来自服务的数据时提醒节点的值。您的控制器已经使用了承诺，并且在解决承诺时将数据绑定到范围。

.then(function(data){
    ...
});

如果你特别想从外部js脚本访问数据，你可以简单地从控制器调用函数：

脚本

<script type="text/javascript">
function alertNodes() {
    nodes = angular.element(document.querySelector('[ng-controller="DataController"]')).scope().nodes;
    alert(nodes);
    cy.add(nodes);
}
</script>

控制器

dataFactory.getNodes().then(function(data){
        //$scope.nodes = data;
        alertNodes()
    });

JavaScript 访问 Angular 范围返回 "undefined" - 异步问题？

JavaScript access to Angular scope returning "undefined" - Asynchronous issue?

javascript

asynchronous

node.js

cytoscape

angularjs