Arhn - архитектура программирования

$scope.myVariable не обновляется в контроллере для модального загрузчика angular-ui

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

<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 ''
      };

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

Есть ли какие-то проблемы $scope с модальным интерфейсом angular-ui, о которых мне нужно знать из?

Изменить:

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

введите здесь описание изображения

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

angularjs angular-ui-bootstrap angular-ui
16.10.2013

  • Где определяется метод клика? 16.10.2013
  • метод click определен внутри popupController (я обновил вопрос, чтобы уточнить) 16.10.2013
  • Тогда лучшим вариантом для вас будет передача объекта вместо строки, поскольку присваивание строки создает новую строку в дочерней области. Создайте что-то вроде $scope.phone={number:null} и передайте его дальше. 16.10.2013

Ответы:


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>

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

16.10.2013
  • никогда бы не догадался, что эти проблемы существуют в angular. Спасибо :) 18.10.2013
  • Это были часы за часами разбитого сердца, пытаясь понять, почему мой модальный режим не работает, пока я не наткнулся на это, спасибо. 26.06.2014

    • 2

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

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

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

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

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

    02.02.2014
    Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..