Угловая модель привязки в области видимости?

Привет, я новичок в angular js и пытаюсь написать приложение чата, используя сокет io и angular js с ionic для платформы 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>

но когда я вижу печать этой модели на консоли, она показывает undefined, когда я определяю в начале в контроллере, тогда она показывает пустое значение

Контроллер.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);
                }
            });
        });
      }
    };
 });

я застрял здесь ... я пытаюсь найти это в Google, но не могу решить. В случае путаницы не стесняйтесь комментировать. Любая помощь будет здорово.


ОБНОВЛЕНИЕ

Когда я использовал первый ответ на этот вопрос, проблема была решена, но до сих пор не ясно, почему ng-submit не работает? Любая идея, почему? Потому что кажется, что я все еще не могу обновить область просмотра с контроллера?


person Community    schedule 24.05.2014    source источник
comment
Проблема поднимается здесь forum.ionicframework.com/t/   -  person    schedule 24.05.2014


Ответы (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"> 

Вот планкер с рабочим решением. Он выдает несколько случайных ошибок, я на самом деле не знаю ionic. Но пример работает и все остальное не имеет значения.

person Marcel Gwerder    schedule 24.05.2014
comment
Но в ng-repeat я получаю messages без проблем, и даже действие ng-submit sendMessage также вызывает вызов без упоминания $parent - person ; 24.05.2014
comment
Спасибо, я узнал, что это было, как вы сказали, <ion-content> создает свою собственную область, я нашел перечисленные там проблемы и решение, также спасибо за помощь. - person ; 24.05.2014
comment
Я добавил лучшее решение, чем $parent. Вы можете получить доступ к messages в ng-repeat, потому что он просто создает его в области ion-content. Я также упомянул, почему вы можете позвонить sendMessage в моем ответе. - person Marcel Gwerder; 24.05.2014
comment
Да понял спасибо дружище. я приложил ссылку на форум, пожалуйста, примите, если кто-то в будущем захочет ссылку. Спасибо еще раз . - person ; 24.05.2014
comment
Без проблем. Я думаю, что это то же самое, что и в моем ответе, поэтому я оставлю все как есть. - person Marcel Gwerder; 24.05.2014