При использовании NG-модели в Ionic сегодня значение, полученное в соответствующем контроллере, не определен. Раньше я получал его при использовании связывания NG-модели AngularJS, что смущает и решил выяснить. Давайте посмотрим на демонстрацию ниже.
При изучении данных двунаправленного связывания AngularJS NG-модели мы получаем соответствующее значение NG-модели через следующий код:
демо
<div ng-app = "myApp" ng-controller = "myctrl"> name: <input ng-model = "name"> {{name}} <button ng-click = "show ()"> shoname </button> </div>Соответствующий JS
<script> var app = angular.module ('myApp', []); app.controller ('myctrl', function ($ scope) {$ scope.show = function () {console.log ($ scope.name); // Вы можете правильно получить значение, введенную на страницу. AllPrpos (obj) {// используется для сохранения всех имен атрибутов и значений var props = ""; OBJ [P] + ";";Печать объекта $ Scope, вы можете видеть, что его свойства содержат пару имен имени клавиш. Но когда мы были в ионном проекте, мы также получили это так:
Демо2
<ion-view view-title = "Chats"> <yon-content> <div> Имя: <input ng-model = "name"> {{name}} <button ng-click = "show ()"> shoname </button> </div> </ion-content> </yon-view>Соответствующий чат в соответствующем контроллере.js Ionic:
Angular.Module ('Starter.Controllers', []). Controller ('CHATSCTRL', функция ($ scope) {$ scope.show = function () {console.log ($ scope.name); // Консоль печатает неопределенную консоль.log (allprpos ($ scope));};};});В печатном $ Scope не было найдено имя. Консоль напечатана неопределенной, но {{name}} на странице может быть выводится нормально. Почему это? По оценкам, многие ионные начинающие столкнулись с этой ситуацией в своих проектах. Является ли двустороннее связывание данных AngularJS не недействительным в ионном? Если я напишу таким образом:
демо3
<ion-view view-title = "Chats"> <Ion-content ng-controller = "myChatctrl"> <div> Имя: <input ng-model = "name"> {{name}} <button ng-click = "show ()"> shoname </button> </div> </ion-content> </ion-view> view> </ion-view> </ion-view> </ion-view> </ion-view>Переопределить mychatctrl in controller.js:
Angular.Module ('Starter.Controllers', []). Controller ('myChatctrl', function ($ scope) {$ scope.show = function () {// Кнопка кнопки Console.log ($ scope.name); // Консоль может печатать значение в входном окне ввода.Таким образом, каждый должен был увидеть некоторые подсказки. На самом деле, корень всех проблем - область применения. При использовании директивных команд, таких как NG-модель, NG-Repeat и т. Д., Это создаст саму область. Фактически, это включает в себя время создания ионного контроллера. Область масштаба управления, созданного в ионном маршруте, больше, чем область сферы масштаба MyChatctrl в DEMO2 ниже; Оказывается, что эти две области различны, что объясняет, почему значение, полученное DEMO2 выше, не определена. Я нашел проблему, что, если я решу эту проблему?
Область применения может быть унаследован, и свойства объекта JS также наследуются, поэтому мы можем немного изменить Demo2 и определить значение по умолчанию в ChatSctrl прямо сейчас:
var $ scope.name = {text: ""};
Ввод NG-модели на странице:
<Ion-view view-title = "Chats"> <Ion-content ng-controller = "myChatctrl"> <viv> Имя: <input ng-model = "name.text"> {name}} <Кнопка ng-click = "show ()"> shoname </button> </div> </of-content> </ion-view-view-view> </ion-view-view>После этого нажмите кнопку и обнаружите, что значение $ scope.name может быть напечатано нормально. Если вы не хотите использовать свойства объекта для этого, вы можете связать его с объемом его родительского объема при привязке, а CTRL DEMO2 остается неизменным, и код на странице изменяется на следующее:
<Ion-view view-title = "Chats"> <Ion-content ng-controller = "mychatctrl"> <div> Имя: <input ng-model = "$ parent.name"> {{name}} <button ng-click = "show ()"> shoname </button> </div> </of-contentent> </ion-view-view> </hon-view view> </hon-view> </ion-v-view>Это также получит стоимость $ scope.name, и проблема будет решена. Если эта проблема возникает, то же самое можно сделать. Если у вас есть какие -либо другие решения, пожалуйста, оставьте сообщение.
Справочная статья
NG-модель Ionic не может возникнуть проблемы с ценой
Поймите масштаб Angularjs
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.