Блог

Главная - Вопросы по программированию - Странная проблема с Angular ng-моделью

Странная проблема с Angular ng-моделью

#javascript #html #angularjs #model

#javascript #HTML #angularjs #Модель

Вопрос:

У меня странный вопрос относительно моего приложения Angular.

Я хотел получить входные тексты, когда пользователь вводит тексты в поле ввода.

мой html

 <input type="text" class="form-control" ng-model="texts" ng-change="type()"/>

мой js

   $scope.type = function() {
      console.log($scope.texts)
      console.log($scope) //doesn't see texts property either
  }

Однако каждый раз, когда я что-то печатаю, в первом журнале консоли отображается «undefined». Похоже, контроллер не может найти свойство texts. Кто-нибудь может помочь мне в этой странной проблеме? Большое спасибо!

Комментарии:

1. Почему бы вам сначала не определить это?

2. можете ли вы создать jsfiddle?

3. Внутри функции, определенной на, $scope вы обычно можете вместо этого найти значения, которые ищете this . Итак, попробуйте заменить $scope.texts на this.texts .

4. Просто из любопытства Angular обеспечивает двустороннюю привязку, так зачем вам использовать для этого функцию?

5. Ваш код работает нормально — jsfiddle.net/spencerooni/mX37Q — Однако мы можем только догадываться о том, что код не был показан.

Ответ №1:

Это может быть достигнуто с помощью двусторонней системы привязки данных angular:

Привязка данных в приложениях Angular — это автоматическая синхронизация данных между компонентами модели и представления. Способ, которым Angular реализует привязку данных, позволяет вам рассматривать модель как единственный источник истины в вашем приложении. Представление всегда является проекцией модели. Когда модель изменяется, представление отражает изменения, и наоборот.

Это позволяет нам синхронизировать свойства области видимости нашего контроллера путем привязки к ним в нашем html.

Итак, мы могли бы определить наш контроллер следующим образом:

 myApp.controller('SomeController', function ($scope) {
  $scope.text = "";
});

Теперь мы можем использовать это в нашем html следующим образом:

 <div ng-controller="SomeController">
  <input type="text" class="form-control" ng-model="text" />
</div>

Здесь важно обратить ng-model внимание на директиву. Здесь мы привязываем text свойство, которое мы определили в нашем контроллере, к <input> полю. Теперь, с двусторонней привязкой, если мы введем в поле ввода, оно автоматически обновит text свойство. Таким образом, мы можем получить доступ к значению поля ввода в нашем контроллере без необходимости выполнять какую-либо дополнительную работу.

Вот plnkr с рабочим примером: http://plnkr.co/edit/xEkoDbPxwrWgGfuEiS3a?p=preview

Надеюсь, это поможет 🙂

Ответ №2:

$scope должен быть передан контроллеру. Проверьте аргументы вашего контроллера.

Метки: