在控制器'on'触发后,AngularJS视图不会更新

时间:2013-11-28 10:20:54

标签: angularjs

我有以下控制器:

joolaControllers.controller('dsCtrl', function ($scope, dsService, socket) {
  dsService.getList();
  socket.on('datasources/list:done', function (list) {
    $scope.list = list.datasources;  
  });
});

以下服务:

var joolaServices = angular.module('ngjoola.services', ['ngjoola']);
joolaServices.service('dsService', function (socket) {
  this.getList = function () {
    return joolaio.objects.datasources.list();
  };
});

socket定义如下(joolaio.io.socket是一个socket.io对象):

ngjoola.factory('socket', function ($rootScope) {
  var socket = joolaio.io.socket;
  return {
    on: function (eventName, callback) {
      socket.on(eventName, function () {
        var args = arguments;
        $rootScope.$apply(function () {
          callback.apply(socket, args);
        });
      });
    },
    emit: function (eventName, data, callback) {
      socket.emit(eventName, data, function () {
        var args = arguments;
        $rootScope.$apply(function () {
          if (callback) {
            callback.apply(socket, args);
          }
        });
      })
    }
  };
});

我的HTML(玉):

.box-content(ng-controller="dsCtrl")
   | {{list}}

列表没有显示。

两个问题:

  1. 这是我应该如何编写服务/控制器?从某种意义上说,Angular非常混乱。
  2. 为什么{{list}}没有显示?

1 个答案:

答案 0 :(得分:0)

这是一个回调问题,我将我的代码更新为以下内容,现在可以使用了:

控制器:

joolaControllers.controller('dsCtrl', function ($scope, dsService) {
  dsService.getList(function(list) {
    $scope.list = list;
  });
});

服务:

joolaServices.service('dsService', function (socket) {
  this.getList = function (callback) {
    joolaio.objects.datasources.list(function() {
      socket.on('datasources/list:done', function(list) {
        callback(list.datasources);
      })  
    });
  };
});