Угловая привязка не работает

Question

У меня есть форма, где пользователь вводит имя и нажимает «Далее». Что я хочу сделать, так это то, что когда пользователь нажимает «Далее», я хочу, чтобы alert обновленное значение $scope.name внутри функции toChat, но начальное значение предупреждается, что является Джеймсом. Как я могу получить доступ к обновленному значению внутри угловой функции? У меня есть серьезные проблемы с пониманием обмена переменными в AngularJs.

JS

.controller('NewcontactCtrl', function($scope,$rootScope, $ionicHistory,$window) { 

    $scope.name='James'; 
    $scope.myGoBack = function() { 
     $ionicHistory.goBack(); 
     }; 
    $scope.toChat = function() { 
     alert($scope.name); 

    }; 
}) 

HTML

<ion-view view-title="New contact"> 
    <ion-nav-back-button> 
    </ion-nav-back-button> 

    <ion-nav-buttons side="primary"> 
     <button class="button" ng-click="myGoBack()"> 
     Cancel 
     </button> 
    </ion-nav-buttons> 

    <ion-nav-buttons side="secondary"> 
     <button class="button" ng-click="toChat()" > 
     Next 
     </button> 
    </ion-nav-buttons> 

    <ion-content scroll="false" has-header="false" padding="true" > 

     <div class="list"> 
      <label class="item item-input"> 
       <input type="text" placeholder="Name" ng-model="name" /> 
      </label> 
      <label class="item item-input"> 
       <textarea placeholder="Notes" ng-model="notes" rows="10"></textarea> 
      </label> 
     </div> 
</ion-content> 
</ion-view> 

Может кто-нибудь помочь?

Answer 1

Пожалуйста, см: https://github.com/angular/angular.js/wiki/Understanding-Scopes

Наиболее значимая часть в выше:

Область наследования обычно просто, и вам часто даже не нужно знать, что это происходит ... пока вы не попробуете 2-сторонняя привязка данных (т. е. элементы формы, ng-model) к примитиву (например, номеру, строке, логическому значению), определенному в родительской области внутри области содержимого. Это не работает так, как многие ожидают, что он должен работать. Случается, что дочерняя область получает свое собственное свойство, которое скрывает/затеняет родительское свойство с тем же именем. Это не то, что делает AngularJS - так работает прототипное наследование JavaScript. Новые разработчики AngularJS часто не понимают, что ng-repeat, ng-switch, ng-view и ng-include все создают новые дочерние области, поэтому проблема часто возникает, когда задействованы эти директивы. ...

Этот вопрос с примитивами можно легко избежать, следуя «лучшей практике» always have a '.' in your ng-models - смотреть 3 минуты. Misko демонстрирует примитивную проблему с привязкой ng-switch.

Наличие '.' в ваших моделях будет гарантировать, что прототипное наследование находится в игре. Так, используйте <input type="text" ng-model="someObj.prop1">, а не <input type="text" ng-model="prop1">.

Я считаю, что у вас есть директива где-то (возможно, ионное содержимое), которое создает новую область, в которой ваше поле ввода отделено от области, где находится ваша кнопка Next.

Чтобы имитировать это, я использовал ng-repeat в приведенном ниже фрагменте (но повторяю только один раз), что приводит к такому же поведению разделения областей. Если бы вы использовали код контроллера без изменений с этим html, вы бы воспроизвели проблему, с которой вы столкнулись.

Решение по этому вопросу заключается в том, чтобы «использовать точку (.)» При связывании.Обратите внимание, что я обернул имя внутри объекта с именем «данные» в области, поэтому теперь вы ссылаетесь на это как data.name, а не только на name.

(function() { 
 
    'use strict'; 
 

 
    angular.module('myApp', []) 
 
    .controller('NewcontactCtrl', function($scope, $window) { 
 

 
    $scope.repeaterTest = [1]; 
 
     $scope.data = {name: 'James'}; 
 
     $scope.toChat = function() { 
 
     $window.alert($scope.data.name); 
 
     }; 
 
    }); 
 

 
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script> 
 

 
<div ng-app="myApp"> 
 
    <div ng-controller="NewcontactCtrl"> 
 
    <label ng-repeat="test in repeaterTest"> 
 
     <input type="text" placeholder="Name" ng-model="data.name" /> 
 
    </label> 
 
    <button class="button" ng-click="toChat()"> 
 
     Next 
 
    </button> 
 
    </div> 
 

 
</div>

Answer 2

Я думаю, что вам нужно, чтобы предупредить что-то подобное ... alert($scope.name)

Answer 3

Дополнение к @Paul Fitzgerald, точки, убедитесь, что ng-controller="NewcontactCtrl" входит в верхней рамки в HTML DOM.

Answer 4

попробуй добавить услугу для того, чтобы обмениваться данными в пределах областей

.controller('NewcontactCtrl', function($scope,$rootScope,sharedData $ionicHistory,$window) { 

    $scope.name=sharedData.Name ; 
    $scope.myGoBack = function() { 
     $ionicHistory.goBack(); 
     }; 
    $scope.toChat = function() { 
     alert(sharedData.Name); 

    }; 
}); 

app.factory('sharedData', [function() { 
    var self = {}; 

    self.Name = "James"; 


    return self; 
}]);