Angular多次运行控制器
我目前正在开发一个聊天的Web应用程序。 这应该作为一个单一的页面应用程序来实现。 为此，我使用Angular Router。 我使用socket-io将消息从客户端发送到服务器。 在路线之间的导航实际上工作得很好。
在home.htmlpath中，有一个input元素用于input消息。 点击button后，它将作为<ul>列表中的<li>元素添加并显示。 启动应用程序时，我可以正常写邮件。 但是，如果我从家乡路线导航到另一条路线，然后回家并input消息，它将被发送两次。 下一次来回导航三次，依此类推。 就好像控制器正在运行几次一样。
在互联网上我找不到解决这个问题的办法。 但无论如何，这是必须的。
PS：我只在index.html包含一个脚本文件，因为我用gulp把所有的js文件放在一个文件中。
这是代码。
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <base href="/"> <title>FB4 Messenger</title> <meta name="viewport" content="width=device-width, user-scalable=xo, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="css/style.css"> </head> <body ng-app="chatApp"> <div class="loader"> <div class="loader-text">Laden...</div> <div class="progress"> <div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" style="width: 100%"></div> </div> <!--progress--> </div> <!--loader--> <header> <nav class="navbar navbar-default" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="#collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <section class="layout"> <div class="branding"> <a href="/"> <img src="images/header/app_fh_logo.png" alt="App logo"> </a> </div> <!--branding--> </section> <!--layout--> </div> <!--navbar-header--> </div> <div class="collapse navbar-collapse" id="collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"> <a href="/"> <span class="glyphicon glyphicon-home"></span> Startseite </a> </li> <li> <a href="/profile"> <span class="glyphicon glyphicon-user"></span> Konto </a> </li> <li> <a href="/about"> <span class="glyphicon glyphicon-info-sign"></span> Über </a> </li> </ul> </div> <!-- navbar collapse --> </nav> </header> <!--header--> <!-- ANGULAR DYNAMIC CONTENT --> <div ng-view></div> <script src="js/script.js"></script> </body> </html>
home.html
<div class="container"> <ul id="messages"></ul> <div> <input id="m" ng-model="message" autocomplete="off" /> <button id="send" ng-click="send()">Send</button> </div> </div>
about.html
<div class="container"> <div class="card"> <img class="card-img-top" src="../images/header/app_fh_logo.png" alt="Card image cap"> <div class="card-body"> <h3 class="card-title">FB4 Messenger</h3> <p class="card-text">Version: 0.0.1 </br> Ⓒ </p> <a href="/" class="btn btn-primary">Startseite</a> </div> </div> </div>
app.js
let $ = jQuery = require("jquery"); require("./bootstrap.min"); require("angular"); require("angular-route"); angular.module("chatApp", ["ngRoute", "appRoutes", "MainCtrl", "ProfileCtrl", "AboutCtrl"]); $(function() { $(".loader").fadeOut(1000); });
appRoutes.js
angular.module("appRoutes", []).config(["$routeProvider", "$locationProvider", function($routeProvider, $locationProvider) { $routeProvider .when("/", { templateUrl: "views/home.html", controller: "MainController" }) .when("/profile", { templateUrl: "views/profile.html", //controller: "ProfileController" }) .when("/about", { templateUrl: "views/about.html", //controller: "AboutController" }); $locationProvider.html5Mode(true); } ]);
mainCtrl.js （这里的消息被发送到服务器）
angular.module("MainCtrl", []).controller("MainController", ["$scope", function ($scope) { let io = require("socket.io-client"); let socket = io.connect(); $scope.send = function () { socket.emit("message", $scope.message); $scope.message = ""; }; $("body").keypress(function (event) { if (event.keyCode === 13) { $("#send").click(); } }); socket.on("message", function (m) { let $li = $("<li>").text(m); $("#messages").append($li); }); } ]);
和服务器，接收消息的index.js
const express = require("express"); const http = require("http"); let app = express(); let server = http.createServer(app); app.use(express.static(__dirname + "/")); app.get("*", function (req, res){ res.sendFile(__dirname+"/index.html"); }); let io= require("socket.io")(server); io.on("connection", function (socket) { socket.on("message", function (m) { io.emit("message", m); console.log(m); }); }); server.listen(3000, function () { console.log("Server runing"); });
这是问题。
$("body").keypress(function (event) { if (event.keyCode === 13) { $("#send").click(); } });
- TypeError：Dbschema（Mongoose Schema）不是函数
- jQuery与AngularJS与Node.js的区别
- 切换到Mongoose，我不应该使用请求客户端？
- CORS错误：请求标头字段预检响应中的Access-Control-Allow-Headers不允许授权
- 是否有可能在angularjs中从控制器调用一个特定的函数？
- 如何通过bower.json安装angular-mocks？
- 如何将后端错误/成功消息从Node.js发送到AngularJS控制器的前端？
- $ q.allPromises返回一个数组，但我只想要一个元素，而不是全部
- 在AngularJS中使用数据库 – 我应该在哪里写DB连接代码？