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

发布时间：2020-12-17 17:13:29 所属栏目：安全来源：网络整理

导读：嗨,我是角度js的新手,并尝试使用socket io和angular js with ionic for android平台编写聊天应用程序.但在我的聊天页面中有一个问题. 我正在尝试使用ng-model将文本框绑定到$scope.message变量,但是当我在页面本身显示相同的变量值时它没有得到绑定作为测试,

嗨,我是角度js的新手,并尝试使用socket io和angular js with ionic for android平台编写聊天应用程序.但在我的聊天页面中有一个问题.
我正在尝试使用ng-model将文本框绑定到$scope.message变量,但是当我在页面本身显示相同的变量值时它没有得到绑定作为测试,但是在控制器中我得到的值为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,function(){
            var args = arguments;
            $rootScope.$apply(function(){
                if(callBack){
                    callBack.apply(socket,args);
                }
            });
        });
      }
    };
 });

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

UPDATE

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

解决方法

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

Be aware that this directive gets its own child scope. If you do not understand why this is important,you can read 07001.

因此,您的消息属性不在您的控制器范围内.
对象通过引用传递,sendMessage是一个函数,分别是一个对象,这就是为什么它仍然从子范围正确调用.

您应该做的是创建一个具有名称的对象,以便“打包”您要共享的属性.

$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.它抛出一些随机错误,我实际上不知道离子.但是这个例子很有效,其他一切都无关紧要.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!