个人中心
gpt4 book ai didi

angularjs - 范围问题中的 Angular 绑定(bind)模型？

转载 作者：行者123 更新时间：2023-12-03 22:22:24 27 4
gpt4 key购买 nike

嗨，我是 angular js 的新手，并尝试使用 socket io 和 angular js 和 ionic 为 android 平台编写聊天应用程序。但是在我的聊天页面中存在一个问题。
我正在尝试绑定(bind) textbox到$scope.message变量使用 ng-model但是当我在页面本身中显示相同的变量值时，它没有作为测试绑定(bind)，它按原样工作，但在 Controller 中我得到的值为 undefined或为空

索引.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 中开始定义时它显示未定义，然后它显示空值

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 不起作用？任何想法为什么？因为似乎我仍然无法从 Controller 更新 View 范围？

最佳答案

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

Be aware that this directive gets its own child scope. If you do not understand why this is important, you can read https://docs.angularjs.org/guide/scope.



因此，您的 message属性不在您的 Controller 范围内。
对象通过引用传递， 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 .它会引发一些随机错误，我实际上不知道 ionic 。但是这个例子有效，其他一切都无关紧要。

关于angularjs - 范围问题中的 Angular 绑定(bind)模型？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23845897/

27 4 0
文章推荐： xcode - xcode 4中的重复设备方案
文章推荐： meteor - 从外部应用程序验证 meteor 用户
文章推荐： oauth - token 返回后，Google 和帐户关联失败的操作
文章推荐： PDF压缩库/工具
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com