Javascript 在AngularJS中使用作用域和控制器时发生冲突_Javascript_Angularjs_Node.js_Socket.io

Javascript 在AngularJS中使用作用域和控制器时发生冲突

javascript angularjs node.js socket.io

Javascript 在AngularJS中使用作用域和控制器时发生冲突,javascript,angularjs,node.js,socket.io,Javascript,Angularjs,Node.js,Socket.io,我有一个简单的网站，使用AngularJS和NodeJS后端它有多个页面，如主页、登录/注册页面等我想实现一个“聊天”页面，您可以使用socket.io向其他客户端发送消息。我已经使用一个本地控制器（本地，我的意思是在一个页面上激活-聊天页面）使该部分工作问题是，我希望聊天系统是全局的（即客户端可以在主页上接收消息，但它们仍然只会在返回聊天页面时显示）我在设置聊天控制器全局（在所有页面上都处于活动状态）时遇到问题以下是我如何将其包括在内： <body ng-controller

我有一个简单的网站，使用AngularJS和NodeJS后端

它有多个页面，如主页、登录/注册页面等

我想实现一个“聊天”页面，您可以使用socket.io向其他客户端发送消息。我已经使用一个本地控制器（本地，我的意思是在一个页面上激活-聊天页面）使该部分工作

问题是，我希望聊天系统是全局的（即客户端可以在主页上接收消息，但它们仍然只会在返回聊天页面时显示）

我在设置聊天控制器全局（在所有页面上都处于活动状态）时遇到问题

以下是我如何将其包括在内：

<body ng-controller="AppCtrl"> <!-- include main controller -->
    <div ng-include="'header.tpl.html'"></div>
    <div ng-controller="ChatCtrl" class="page"> <!-- include global Chat controller -->
        <div ng-view class="container"></div>
    </div>
    <div ng-include="'footer.tpl.html'"></div>
    <!-- ...etc. -->
</body>

这很有效，但似乎我无法从聊天页面访问值。仍然可以调用从聊天控制器声明的函数，但“$scope.message”值（包含正在键入的消息）始终为空

这是我的聊天控制器（实际上叫做TravelCtrl）

angular.module（'base'）。controller（'TravelCtrl'，//['$scope'，'security'，
函数（$rootScope、$scope、security、NgMap、$geolocation、socket）{
$scope.messages=[]；
//套接字侦听器
// ================
socket.on（'init'，函数（数据）{
$scope.name=data.name；
$scope.users=data.users；
});
socket.on（'send:message'，函数（message）{
$scope.messages.push（消息）；
});
socket.on（'change:name'，函数（数据）{
changeName（data.oldName、data.newName）；
});
socket.on（'user:join'，函数（数据）{
$scope.messages.push({
用户：“服务器”，
文本：“用户'+data.name+'已加入。”
});
$scope.users.push（data.name）；
});
//当用户断开连接或离开房间时，在对话中添加消息
socket.on（'user:left'，函数（数据）{
$scope.messages.push({
用户：“聊天室”，
文本：“用户“+data.name+”已离开。”
});
变量i，用户；
对于（i=0；i<$scope.users.length；i++）{
user=$scope.users[i]；
如果（用户===data.name）{
$scope.users.splice（i，1）；
打破
}
}
});
//私人佣工
// ===============
var changeName=函数（旧名称、新名称）{
//重命名用户列表中的用户
var i；
对于（i=0；i<$scope.users.length；i++）{
if（$scope.users[i]==oldName）{
$scope.users[i]=新名称；
}
}
$scope.messages.push({
用户：“服务器”，
文本：“用户”+oldName+“已被验证为”+newName+。”
});
}
//方法发布到范围
// ==============================
$scope.changeName=函数（）{
socket.emit（'change:name'{
名称：$scope.newName
}，函数（结果）{
如果（！结果）{
警报（“更改您的姓名时出错”）；
}否则{
changeName（$scope.name，$scope.newName）；
$scope.name=$scope.newName；
$scope.newName=''；
}
});
};
$scope.sendMessage=函数（）{
socket.emit（'send:message'{
消息：$scope.message
});
//在本地将消息添加到我们的模型中
$scope.messages.push({
用户：$scope.name，
text:$scope.message
});
//清除消息框
$scope.message=''；
};
// ================
var init=函数（）{
$scope.newName=security.currentUser.username；
$scope.changeName（）；
}
if（$rootScope.hasload（）&&$scope.name！=security.currentUser.username）{
init（）；
}否则{
$rootScope.$on（'info-loaded'，init）；
}
}
//]
);

以及聊天页面本身。奇怪的是，连接的用户和消息显示正确，但控制器似乎无法检索键入的消息

<div class='col'>
  <h3>Users</h3>
  <div class='overflowable'>
    <p ng-repeat='user in users'>{{user}}</p>
    </div>
</div>

<div class='col'>
    <h3>Messages</h3>
    <div class='overflowable'>
    <p ng-repeat='message in messages' ng-class='{alert: message.user == "chatroom"}'>{{message.user}}: {{message.text}}</p>
    </div>
</div>

<div class='clr'>
  <form ng-submit='sendMessage()'>
    Message: {{message}}<br/>
    <input size='60', ng-model='message'/>
    <input type='submit', value='Send as {{name}}'/>
    </form>
</div>


使用者
{{user}
信息


有一个问题：“socket”不是angularjs中包含的库，因此当调用回调时，angularjs不会正确注意到您的“$scope”修改
必须使用$scope.$apply（函数（）{code在此修改$scope}）
例如：
socket.on('send:message', function (message) {
  $scope.$apply(function() {
    $scope.messages.push(message);
  });
});

编辑：
我希望聊天系统是全球性的（即客户端可以在主页上接收消息，但它们仍然只会在返回聊天页面时显示）
将数据存储在全局变量中，或者使用$rootScope，它是应用程序中使用的所有$scope的父范围
编辑2：
事实上，它应该能解决你的问题；）
还有一件事：
1） 对全局变量（或全局变量）使用$rootScope而不是$scope。在任何$scope中，您都将访问$rootScope变量
socket.on('send:message', function (message) {
  $scope.$apply(function() {
    $scope.messages.push(message);
  });
});