Question

我是角色的新手，可能会遗漏一些基线。我正试图将我的视图绑定到控制器数据，如here所述。如果它是有角度的，那么所有的愤怒都不应该是一个复杂的情况。在这里，我有我的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（＆＃39; MetricsController＆＃39;）。beanstalks或app.MetricsController.beanstalks没有帮助。（这也可能有一个简单的答案，但我只能找到如何通过HTML访问它。）

提前致谢

Answer 1

我猜$.eventsource没有使用AngularJS？如果是这样，Angular不知道$scope.beanstalks已经改变了。

所以要么添加：在$scope.$digest()回调结束时message迫使Angular自行更新

或（可能更喜欢）：使用$http Angular服务与＆＃34; / data / beanstalk＆＃34;进行交互。代替。

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/When-to-use- $范围。$申请（）
https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope

如果您确定没有父范围需要更新$ scope.beanstalks

，您也可以使用$ scope。$ digest（）

绑定AngularJS控制器数据以进行查看

2 个答案: