AngularJS：管理DOM的正确方法

Question

I'm still new to angular and am wondering whats the 'right' way of tackling this problem. Suppose the back end has events and attendees . I want an interface to display the events and order by attendees . This is easily done in the back end (should I order_by in the database or sort on client side?). The order and number of attendees needs to be constantly updating. Here is what I would do

app.js

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

eventApp.controller("eventController", ['$scope', '$http', '$interval', function($scope, $http, $interval){
    $scope.events = null;
    var get_events = function(){
        var promise = // make GET call to server, server returns list of events ordered by attendees
        promise.success(function(data, status, headers, config){
            $scope.events = data.questions; // this part seems bad....
        }
    $interval(get_events, 1000);
}])

then in the html, where i want the events to be render

EventPage.html
<!-- pretend we are in the appropriate app and controller -->
<div ng-for="event in events">
      <p> {{ events.name }} - {{ events.attendee_count }} </p>
</div>

This just sees wrong, I can see services and directives possibly being helpful but they're still fairly foreign concepts to me. Wondering what a good approach to this would be, overriding $scope.events each second seems... bad...

Answer 1

One approach if you don't want to recreate $scope.events every second is to add events to $scope.events if they are new, and delete events if they no longer exist in the response.

But if you are trying to make an HTTP request every second to keep events up-to-date, you may want to consider using a more event-based method of updating the events list, such as a websocket.