Эта статья поможет вам понять, как работает цепочка $scope в случае вложенных контроллеров. В качестве предварительного условия вы должны знать основы angularJS и то, как создавать контроллеры и прикреплять их к представлению.
Простой пример
Мы рассмотрим пример двух контроллеров, оба имеют данные в «numVal», которые привязаны к полям ввода и отображаются в виде абзаца.
Ниже вы найдете код вышеуказанного приложения.
Как вы можете видеть на изображениях выше, у нас есть 2 контроллера, внутренний контроллер вложен во внешний контроллер. Оба контроллера пытаются получить доступ к «numVal», и в представлении (html) мы используем «numVal» из обоих контроллеров $scope. когда мы загружаем приложение, мы обновляем только «numVal» во внешней $scope. Давайте проверим журналы консоли, чтобы лучше понять.
Понятно, что только внешний $scope имеет numVal = 0. Внутренний $scope не имеет такого свойства, но интересно то, что наше приложение при загрузке показывает начальное значение 0 даже для внутреннего контроллера (см. изображение приложения выше).
Цепочка $scope
Наблюдаемое выше поведение связано с тем, что цепочка $scope работает как цепочка прототипов JavaScript. Первоначально, когда мы пытаемся получить доступ к «numVal» во внутреннем контроллере, сначала проверяется существование numVal в $scope внутреннего контроллера. если не найдено, то мы перемещаемся вверх по цепочке и проверяем родительскую/внешнюю область $scope. Именно из-за этого даже во внутреннем контроллере мы можем получить начальное значение как 0, даже если «numVal» не существует в $scope внутреннего контроллера.
Что-то странное?
Теперь попробуйте использовать поле ввода или кнопку родительского контроллера (первое поле ввода и кнопка являются частью внешнего контроллера), чтобы изменить «numVal». вы заметите, что изменения также отражаются в дочернем контроллере. Здесь нет ничего странного в соответствии с приведенным выше объяснением «цепочки $scope».
Теперь попробуйте использовать дочерний контроллер, чтобы изменить значение. вы заметите, что обновляются только значения дочернего контроллера.
Это происходит потому, что когда мы обновляем «numVal» из дочернего контроллера, копия создается в $scope дочернего контроллера.
поскольку теперь мы получаем «numVal» в дочернем контроллере, нет необходимости перемещаться вверх по цепочке областей видимости, и, следовательно, теперь значения отсоединены, если вы попытаетесь обновить значения родительского контроллера, они больше не будут изменять значения дочернего контроллера.
Заключение
Приведенное выше понимание помогает решить множество странных сценариев, с которыми вы можете столкнуться при работе с angularJS в своих приложениях. Если вам интересно, где заканчивается цепочка областей видимости, она заканчивается в $rootScope, для которой я постараюсь опубликовать отдельную статью. Еще одна тема для обсуждения — как написать код, который защитит от описанного выше поведения и обеспечит большую согласованность (подсказка: использование контроллера в качестве синтаксиса).
Между тем, счастливого кодирования !!!
