1

这是我的 main.js

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

app.config(function ($routeProvider, $locationProvider) { 
   $locationProvider.html5Mode(true); // enable pushState
   $routeProvider.when('/', { 
      templateUrl: '/app.html',
      controller: 'AppCtrl'
   });
   $routeProvider.when('/another/route', { 
      templateUrl: '/deep.html',
      controller: 'AppCtrl'
   });
});
 var socket = io.connect('http://localhost');
  socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
  });
  socket.on('sendCustomer', function (data) {
    console.log(data);`
    //here i want to set controller scope 
  });
app.controller('AppCtrl', function ($scope) { 
    $scope.model = { 
       message: 'This is my app!!!' 
    };
    $scope.getCustomer = function(imageUrl) {
        alert("here i have to send command to socket io ");
        socket.emit('getCustomer', { });
    };

});

这是 index.html

<!DOCTYPE html>
<html>
<head lang="en">
        <meta charset='utf-8'>
    <title>Egghead Videos</title>
    <link rel='stylesheet' href='/vendor/foundation/foundation.min.css'>
</head>
<body>

<div ng-app='app'>
   <ng-view></ng-view> 
</div>

<script type='text/javascript' src='/vendor/angularjs/angular.js'></script>
<script type='text/javascript' src='/socket.js'></script>
<script type='text/javascript' src='/main.js'></script>

</body>
</html>

这是 app.html

<h1>{{model.message}}</h1>

<a href="" ng-click="getCustomer()">Get Customer Data</a>

<!-- here i want to do ng-repeat of customer data -->

这是我的服务器 .js

var express = require('express');

var app = require('express')()
  , server = require('http').createServer(app)
  , io = require('socket.io').listen(server);
var fs = require('fs');
server.listen(8000);
app.use(express.static(__dirname));
app.use(app.router);

app.get('/', function (req, res) { 
  res.set('content-type', 'text/html');
  res.send(fs.readFileSync(__dirname + '/index.html', 'utf8'));
});
app.get('/another/route', function (req, res) { 
  res.set('content-type', 'text/html');
  res.send(fs.readFileSync(__dirname + '/index.html', 'utf8'));
});
io.sockets.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
  socket.on('getCustomer', function (data) {
    console.log(data);
    socket.emit('sendCustomer', [{ name: 'c1' },{ name: 'c2' }]);
  });
});

因此，当在 main.js 中触发客户端上的 sendCustomer 事件时，我想通过 ng-repeat 在控制器中显示该数据，如果可以，我可以这样做，那么如何..

4

2 回答 2

3

您应该创建一个类似的服务来处理 Socket.IO：

app.factory('socket', ['$rootScope', function ($rootScope) {
  var socket = io.connect();

  返回 {
    上：函数（事件名称，回调）{
      函数包装器（）{
        var args = 参数；
        $rootScope.$apply(function () {
          callback.apply(socket, args);
        });
      }

      socket.on（事件名称，包装器）；

      返回函数（）{
        socket.removeListener(eventName, wrapper);
      };
    },

    发出：函数（​​事件名称，数据，回调）{
      socket.emit（事件名称，数据，函数（）{
        var args = 参数；
        $rootScope.$apply(function () {
          如果（回调）{
            callback.apply(socket, args);
          }
        });
      });
    }
  };
}]);

然后你可以在你的控制器中使用它：

app.controller('AppCtrl', ['$scope', 'socket', function ($scope, socket) {
    socket.on('sendCustomer', function (data) {
      $scope.customers.push(数据);
    });
    $scope.model = {
       消息：“这是我的应用程序！！！”
    };
    $scope.customers = [];

    $scope.getCustomer = 函数（imageUrl）{
        alert("这里我要向socket io发送命令");
        socket.emit('getCustomer', { });
    };
});

最后在 app.html 中：

<div ng-repeat="customer in customers">{{customer}}</div>

顺便说一句，你可以使用 REST API 轻松地做同样的事情，但我猜你想试试 Socket.IO。

于 2013-07-19T15:47:24.013 回答
2

首先，如果你要在模块中使用任何东西，你必须把它传入。

app.controller('AppCtr', ['$scope', 'socket', function($scope, socket) { ...

因为您在 Angular 之外的套接字中做事，所以您还必须注意 $apply() 以使这些更改出现在 Angular 内部。

我可以在这方面输入更多内容，但实际上，Brian Ford 的 socket.io 种子和相关博客文章是 sockets + express + angular 的最佳起点。

于 2013-07-19T15:52:47.063 回答