«Как
blockquote>this
и$scope
работают в контроллерах AngularJS?»Короткий ответ:
this
Когда вызывается функция конструктора контроллера,this
- контроллер. Когда вызывается функция, определенная на объекте$scope
,this
является «областью действия, когда функция была вызвана». Это может (или не может быть!) Быть$scope
, что функция определена. Таким образом, внутри функцииthis
и$scope
могут быть не одинаковыми.$scope
Каждый контроллер имеет ассоциированный объект$scope
. Функция контроллера (конструктора) отвечает за настройку свойств модели и функций / поведения на ее ассоциированном$scope
. Только методы, определенные на этом объекте$scope
(и родительские объекты области, если прототипическое наследование находится в игре) доступны из HTML / view. Например, изng-click
, фильтров и т. Д.Длинный ответ:
Функция контроллера - это функция JavaScript-конструктора. Когда функция конструктора выполняется (например, при загрузке представления),
this
(то есть «контекст функции») устанавливается в объект контроллера. Таким образом, в функции конструктора контроллера «tabs», когда создается функция addPanethis.addPane = function(pane) { ... }
, она создается на объекте контроллера, а не на $ scope. Представления не видят функцию addPane - они имеют доступ только к функциям, определенным в области $ scope. Другими словами, в HTML это не сработает:
won't work
После выполнения функции конструктора контроллера «tabs» мы имеем следующее:
[/g4]
Пунктирная черная линия указывает на прототипное наследование - объем выделения, который прототипически наследуется из Scope . (Это не прототипно наследует область действия, в которой эта директива встречается в HTML.)
Теперь функция ссылки директивы панели хочет связываться с директивой tabs (что на самом деле означает, что она должна влиять вкладки каким-то образом изолируют $ scope). Можно использовать события, но другим механизмом является наличие указателя панели
require
контроллера табуляции. (Кажется, нет механизма для директивы панели дляrequire
вкладки $ scope.)Итак, это ставит вопрос: если у нас есть только доступ к контроллеру вкладок, как мы получаем доступ на вкладках изолировать $ scope (что мы действительно хотим)?
Ну, красная пунктирная линия - это ответ. Функция «scope» функции addPane () (я имею в виду область действия / закрытие функции JavaScript здесь) дает функции доступа к вкладкам изолировать $ scope. I.e., addPane () имеет доступ к «вкладкам IsolateScope» на диаграмме выше из-за закрытия, которое было создано, когда была определена addPane (). (Если мы вместо этого определяем addPane () в объекте облака tabs $, директива панели не будет иметь доступа к этой функции, и, следовательно, у нее не будет возможности связываться с областью вкладок $.)
To ответьте на другую часть вашего вопроса:
how does $scope work in controllers?
:В функциях, определенных в области $ scope,
this
установлено значение «область действия, в которой / когда функция была вызвана». Предположим, что у нас есть следующий HTML:
log "this" and $scope - parent scopelog "this" and $scope - child scopeИ
ParentCtrl
(Solely) имеет$scope.logThisAndScope = function() { console.log(this, $scope) }
. Щелчок по первой ссылке показывает, что
this
и$scope
совпадают, поскольку « область действия, когда функция была вызвана », - это область, связанная сParentCtrl
.Щелчок по второй ссылке показывает
this
и$scope
не совпадают, так как « область действия, когда функция была вызвана », - это область, связанная сChildCtrl
. Итак, здесьthis
установлено значениеChildCtrl
$scope
. Внутри метода$scope
по-прежнему является [scope]ParentCtrl
.Я пытаюсь не использовать
this
внутри функция, определенная в области $ scope, так как она запутывает, на какой объект влияет область видимости, особенно учитывая, что ng-repeat, ng-include, ng-switch и директивы могут создавать собственные дочерние области.