$ scope.myVariable не обновляется в контроллере для angular -ui bootstrap modal

На мой взгляд, у меня есть вход, диапазон и одна кнопка:

<script type="text/ng-template" id="myTemplate.html">
  <input type="text" ng-model="phoneNumber">
  <span>{{ phoneNumber}}</span>
  <input type="button" ng-click="click()">
</script>

При вводе текстового поля содержимое span обновляется как ожидаемое. Но при нажатии кнопки phoneNumber не обновляется внутри контроллера:

app.controller('myPopopCtrl', ['$scope', '$modalInstance',
  function ($scope, $modalInstance) {
      $scope.phoneNumber= '';    

      $scope.click = function() {
        alert($scope.phoneNumber); // alerts only ''
      };

Есть ли какая-то ошибка newbe, которую вы можете сделать в angular, которая делает материал не обновляющимся на $scope внутри контроллера?

Есть ли какие-то проблемы с областью видимости с angular -ui modal Мне нужно знать?

Edit:

Кажется, что phoneNumber создается в двух областях. Один раз в области синей стрелки, где phoneNumber: '' и один раз в области детства на красной стрелке. Представление использует phoneNumber в области дочерних элементов, а контроллер использует phoneNumber в родительской области...

enter image description here

Почему созданы две области?

ОТВЕТЫ

Ответ 1

ng-include создает новую область. Поэтому передайте объект вместо строки

$scope.phone={number:null}

Затем шаблон выглядит как

<script type="text/ng-template" id="myTemplate.html">
  <input type="text" ng-model="phone.number">
  <span>{{ phone.number}}</span>
  <input type="button" ng-click="click()">
</script>

Посмотрите на wiki, чтобы понять проблемы с прототипным наследованием.

Ответ 2

Была та же проблема, и после нескольких экспериментов я решил написать

<input type="text" ng-model="$parent.phoneNumber">

Таким образом, вход привязан к синему диапазону, который именно вы хотели.

Другой способ - инициализировать номер телефона с истинным значением. Попробуйте $scope.phoneNumber= '123'; - отлично работает для меня.

Angular, похоже, подходит к дереву областей, ищущему атрибут для привязки. Если ничего не найдено - оно связывается с самой внутренней областью, красной областью на вашем рисунке. Как следует из другого ответа - эта красная область создается ng-include, как дочерний элемент контроллера $scope.