Bind AngularJS controller data to view

Question

I am new to angular and might be missing some baselines. I am trying to bind my view to controller data as said here. If it is angular's all rage shouldn't be a complex situation. Here i have my 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");
        }
    })

}]);

And there's my view:

<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>

Event source will receive SSE events and should push a new obj to $scope.beanstalks every second. The log on console shows what expected, a growing array printed every second, but the view is not - it shows only the initial value of $scope.beanstalks it stays static.

Also i've tried to move $.eventsource outside controller, but how would i call controller on js? app.controller('MetricsController').beanstalks or app.MetricsController.beanstalks are not helping. (This also might have a simple answer, but i can only find how to access it through html.)

Thanks in advance

What is $.eventsource? jQuery plugin?

tymeJV
– tymeJV

2015-04-15 20:49:58 +00:00
Commented Apr 15, 2015 at 20:49 — tymeJV
– tymeJV, Commented Apr 15, 2015 at 20:49
Yes, it is: github.com/rwaldron/jquery.eventsource

Alexandre Abreu
– Alexandre Abreu

2015-04-15 21:33:13 +00:00
Commented Apr 15, 2015 at 21:33 — Alexandre Abreu
– Alexandre Abreu, Commented Apr 15, 2015 at 21:33

Egor Smirnov · Accepted Answer · 2015-04-15 20:59:35Z

1

If $.eventsource is some code that is external to AngularJS (not AngularJS service or something else injectable via AngularJS Dependency Injection), then this could work (I've added $scope.$apply() call):

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");
                });                
        }
    })

}]);

Please let me know if this will work for your case.

What is $scope.$apply and we should use it here? Couple of links:

http://jimhoskins.com/2012/12/17/angularjs-and-apply.html
https://github.com/angular/angular.js/wiki/When-to-use-$scope.$apply()
https://docs.angularjs.org/api/ng/type/$rootScope.Scope

You could also use $scope.$digest() if you are sure that no parent scopes need update about $scope.beanstalks

answered Apr 15, 2015 at 20:59

Egor Smirnov

6034 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alexandre Abreu Over a year ago

Both $digest and $apply approaches worked, thank you for your answer and links

Jack · Accepted Answer · 2015-04-15 20:56:40Z

1

I am guessing $.eventsource isn't using AngularJS? If so, Angular has no idea that $scope.beanstalks has changed.

So either add: $scope.$digest() at the end of your message callback to force Angular to update itself

Or (probably preferred): use the $http Angular service to interact with "/data/beanstalk" instead.

answered Apr 15, 2015 at 20:56

Jack

21.3k12 gold badges51 silver badges48 bronze badges

Collectives™ on Stack Overflow

Bind AngularJS controller data to view

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related