綁定AngularJS控制器數據以查看

Question

我剛開始接觸角度，可能會缺少一些基准。 我想結合我的看法是說給控制器的數據在這里。 如果是棱角分明，那么所有的怒火都不應該是一個復雜的情況。 這是我的app.js：

var app = angular.module('nwMetrics', []);

app.controller('MetricsController', ['$scope', function($scope){
    $scope.beanstalks = [{ time: "12:00", type: "beanstalk-stable" }];
    $.eventsource({
            label: "json-event-source",
            url: "/data/beanstalk",
            dataType: "json",
            open: function() {
                console.log( "opened connection" );
            },
            message: function( data ) {
                $scope.beanstalks.push(data);
                console.log( $scope.beanstalks );
                // $.eventsource("close", "json-event-source");
        }
    })

}]);

我的觀點是：

<html lang="en" ng-app="nwMetrics">
...
<div ng-controller="MetricsController">
    <div class="env row" ng-repeat="beanstalk in beanstalks">
      <h3>
        {{beanstalk.time}}
        <em class="pull-right">{{beanstalk.type}}</em>
      </h3>
    </div>
</div>

事件源將接收SSE事件，並應每秒將新的obj推送到$ scope.beanstalks。 登錄控制台顯示預期的結果，每秒打印一個不斷增長的數組，但視圖不是-僅顯示$ scope.beanstalks的初始值，它保持靜態。

我也試圖將$ .eventsource移到控制器之外，但是我怎么在js上調用控制器呢？ app.controller（'MetricsController'）。beanstalks或app.MetricsController.beanstalks沒有幫助。 （這也可能有一個簡單的答案，但是我只能找到如何通過html訪問它。）

提前致謝

Answer 1

我猜$.eventsource不使用AngularJS嗎？ 如果是這樣，Angular不知道$scope.beanstalks已經更改。

因此可以在message回調的末尾添加： $scope.$digest()來強制Angular更新自身

或（可能是首選）：使用$http Angular服務與“ / data / beanstalk”進行交互。

Answer 2

如果$ .eventsource是AngularJS外部的某些代碼（不是AngularJS服務或其他可通過AngularJS依賴注入注入的代碼），那么這可以工作（我已經添加了$ scope。$ apply（）調用）：

var app = angular.module（'nwMetrics'，[]）;

app.controller('MetricsController', ['$scope', function($scope){
    var mcontroller = this
    $scope.beanstalks = [{ time: "12:00", type: "beanstalk-stable" }];
    $.eventsource({
            label: "json-event-source",
            url: "/data/beanstalk",
            dataType: "json",
            open: function() {
                console.log( "opened connection" );
            },
            message: function( data ) {

                $scope.$apply(function() {
                    $scope.beanstalks.push(data);
                    console.log( $scope.beanstalks );
                    // $.eventsource("close", "json-event-source");
                });                
        }
    })

}]);

請讓我知道這是否適合您的情況。

什么是$ scope。$ apply，我們應該在這里使用它嗎？ 幾個鏈接：

http://jimhoskins.com/2012/12/17/angularjs-and-apply.html
https://github.com/angular/angular.js/wiki/何時使用- $ scope。$ apply（）
https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope

如果您確定沒有父作用域需要更新$ scope.beanstalks，也可以使用$ scope。$ digest（）。

綁定AngularJS控制器數據以查看

問題描述

2 個解決方案

解決方案1
1 2015-04-15 20:56:40

解決方案2
1 已采納 2015-04-15 20:59:35

綁定AngularJS控制器數據以查看

問題描述

2 個解決方案

解決方案1 1 2015-04-15 20:56:40

解決方案2 1 已采納 2015-04-15 20:59:35

解決方案1
1 2015-04-15 20:56:40

解決方案2
1 已采納 2015-04-15 20:59:35