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

【问题标题】：Angular binding model in scope issue?范围问题中的角度绑定模型？
【发布时间】：2014-07-13 19:08:03
【问题描述】：

您好，我是 angular js 的新手，并尝试使用 socket io 和 angular js 和 ionic 为 android 平台编写聊天应用程序。但是在我的聊天页面中存在一个问题。我正在尝试使用ng-model 将textbox 绑定到$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,data,function(){
            var args = arguments;
            $rootScope.$apply(function(){
                if(callBack){
                    callBack.apply(socket,args);
                }
            });
        });
      }
    };
 });

我卡在这里...我尝试用谷歌搜索但无法解决它。如有困惑，请随时发表评论。任何帮助都会很棒。

更新

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

【问题讨论】：

问题在这里提出forum.ionicframework.com/t/…

标签： angularjs angularjs-scope angularjs-controller

【解决方案1】：

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

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

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

【讨论】：

但是在 ng-repeat 中我得到了messages 没有任何问题，甚至ng-submit 动作sendMessage 也得到了电话而不提及$parent
谢谢我发现它就像你说的那样<ion-content>创建了自己的范围我发现了那里列出的问题和解决方案也感谢您的帮助。
我添加了比$parent 更好的解决方案。您可以在ng-repeat 中访问messages，因为它只是在ion-content 的范围内创建它。我还提到了为什么您可以在我的回答中致电sendMessage。
是的，谢谢，伙计。我已附上论坛的链接，如果将来有人想要参考，请接受。再次感谢。
没问题。我认为这与我的答案相同，所以我会保持原样。