AngularJS & Google 可视化 - 使用状态更改处理程序 (Google API) 在 HTML 页面上显示 $scope 变量 (JS)

Question

我正在编写一段用于 Web 开发的代码，其中我有一个页面使用 Google 可视化 API 的日期范围和数字范围过滤器。同时，我在整个页面中使用 AngularJS。

现在，我的问题如下：我有一个 table，其中包含一定数量的条目。应用其中一个过滤器时，我希望条目数（==行数）显示在 HTML 页面上的某处。

我打算通过使用 Google API 中的 getNumberOfRows() 方法并将结果存储在要在页面上使用的 $scope 变量中来实现这一点，理想情况下每次范围过滤器之一更改状态时都更新。

我添加了 3 个监听器，一个用于点击 table 行（使用 selectHandler()），一个用于处理范围过滤器的状态变化（使用单独的函数 stateChangeHandler() ).

我将值存储在变量 $scope.numberOfRowsShown 中。

整个过程都对点击有效 (selectHandler)。因此，当单击 table 行时，我得到显示的更新后的正确行数调用 HTML 页面上的变量 {{numberOfRowsShown}} (AngularJS).

除了调用函数并将其存储到 stateChangeHandler() 中的变量 $scope.numberOfRowsShown 之外，做完全相同的事情确实在控制台中提供了正确的输出，但它不允许我访问通过调用 {{numberOfRowsShown}} 变量。

有什么想法吗？

这是JS代码：

function selectHandler() {
    // this works!!
    $scope.numberOfRowsShown = table.getDataTable().getNumberOfRows();
};

function stateChangeHandler() {
    // this does not work..
    $scope.numberOfRowsShown = table.getDataTable().getNumberOfRows();
    // correct output in the console..
    console.log(table.getDataTable().getNumberOfRows());
};

// Setup listener to listen for clicks on table rows and process the selectHandler.
google.visualization.events.addListener(table, 'select', selectHandler);

// Setup listeners for statechange in the slider range filters.
google.visualization.events.addListener(dateOfLastAccessFilter, 'statechange', stateChangeHandler);
google.visualization.events.addListener(timeSinceLastAccessFilter, 'statechange', stateChangeHandler);

Answer 1

我已经弄明白了。我需要做的就是重新加载 table!

AngularJS & Google 可视化 - 使用状态更改处理程序 (Google API) 在 HTML 页面上显示 $scope 变量 (JS)

AngularJS & Google Visualization - Visibility of $scope variables (JS) on an HTML page using a state change handler (Google API)

javascript

google-visualization

angularjs