Question

您好我是角度js的新手，并尝试使用socket io和angular js with ionic for android平台编写聊天应用程序。但在我的聊天页面中有一个问题。我正在尝试使用textbox将$scope.message绑定到ng-model变量，但是当我在页面本身显示相同的变量值时它没有得到绑定作为测试在控制器中，我得到的值为undefined或空

index.html

  <body ng-app="farmApp" ng-controller="farmAppController" > 
    <ion-content>
      <ul id="Messeges">
          <li class="right">Welcome to Chat</li>
          <li ng-repeat="chatMessage in messages">
              {{chatMessage}}
          </li>
      </ul>
          <form ng-submit="sendMessage()">
           <input placeholder="Your message" ng-model="message"> 

            <input type="submit" name="send" id="send" value="Send" class="btn btn-success">
              <br/>
              {{message}} //This updates the value as i type in textbox 
              </form>
  </ion-content>
 </body>

但是当我看到在控制台上打印该模型时，当我在控制器的开头定义时它显示未定义，那么它显示空值

Controller.js

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


   farmAppControllers.controller('farmAppController',['$scope','socket',function($scope,socket){
         $scope.messages = [];
         $scope.message = ''; //When i don't declare then console shows undefined on sendMessage function if declared then empty
         socket.on("update", function (data) {
             console.log(data);
             $scope.messages.push(data);
         });

        $scope.sendMessage = function (){
              console.log($scope);
              console.log($scope.message); // This shows undefined or empty on console
              socket.emit("msg",$scope.message);
               $scope.messages.push($scope.message);
               $scope.message ='';
        };
   }]);

我的app.js

  'use strict';

  var farmApp = angular.module('farmApp', ['farmAppControllers','farmAppServices','ionic']);

套接字包装器的services.js

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


  farmAppServices.factory("socket",function($rootScope){
      var socket = io.connect();
      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);
                }
            });
        });
      }
    };
 });

我卡在这里...我试着谷歌但不能解决它。如果有困惑，请随意评论。任何帮助都会很棒。

更新

当我使用this问题的第一个答案时问题得到了解决，但仍然不清楚为什么ng-submit不起作用？任何想法为什么？因为我似乎仍然无法从控制器更新视图范围？

Answer 1

我认为问题是<ion-content>这是一个指令，似乎创建了自己的范围。来自文档：

请注意，此指令有自己的子范围。如果您不理解为什么这很重要，可以阅读https://docs.angularjs.org/guide/scope。

因此，您的message属性不属于您的控制器范围。对象通过引用传递，sendMessage是一个函数，分别是一个对象，这就是为什么它仍然可以从子范围正确调用。

你应该做的是创建一个名称有意义的对象＆＃34; package＆＃34;您想要分享的属性。

$scope.package = {} 
$scope.package.messages = [];
$scope.package.message = 'You default message...';

然后在你的函数中：

$scope.package.messages.push($scope.package.message);

在你的模板中：

<input placeholder="Your message" ng-model="package.message">

这是plunker with a working solution。它抛出一些随机错误，我实际上不知道离子。但这个例子很有效，其他一切都不重要。

范围问题中的角度绑定模型？

1 个答案: