Как использовать область действия в AngularJS [duplicate]

«Как this и $scope работают в контроллерах AngularJS?»

Короткий ответ:

• this Когда вызывается функция конструктора контроллера, this - контроллер. Когда вызывается функция, определенная на объекте $scope, this является «областью действия, когда функция была вызвана». Это может (или не может быть!) Быть $scope, что функция определена. Таким образом, внутри функции this и $scope могут быть не одинаковыми.
• $scope Каждый контроллер имеет ассоциированный объект $scope. Функция контроллера (конструктора) отвечает за настройку свойств модели и функций / поведения на ее ассоциированном $scope. Только методы, определенные на этом объекте $scope (и родительские объекты области, если прототипическое наследование находится в игре) доступны из HTML / view. Например, из ng-click, фильтров и т. Д.

Длинный ответ:

Функция контроллера - это функция JavaScript-конструктора. Когда функция конструктора выполняется (например, при загрузке представления), this (то есть «контекст функции») устанавливается в объект контроллера. Таким образом, в функции конструктора контроллера «tabs», когда создается функция addPane

this.addPane = function(pane) { ... }

, она создается на объекте контроллера, а не на $ scope. Представления не видят функцию addPane - они имеют доступ только к функциям, определенным в области $ scope. Другими словами, в HTML это не сработает:

<a ng-click="addPane(newPane)">won't work</a>

После выполнения функции конструктора контроллера «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:

<div ng-controller="ParentCtrl">
   <a ng-click="logThisAndScope()">log "this" and $scope</a> - parent scope
   <div ng-controller="ChildCtrl">
      <a ng-click="logThisAndScope()">log "this" and $scope</a> - child scope
   </div>
</div>

И ParentCtrl (Solely) имеет

$scope.logThisAndScope = function() {
    console.log(this, $scope)
}

. Щелчок по первой ссылке показывает, что this и $scope совпадают, поскольку « область действия, когда функция была вызвана », - это область, связанная с ParentCtrl.

Щелчок по второй ссылке показывает this и $scope не совпадают, так как « область действия, когда функция была вызвана », - это область, связанная с ChildCtrl. Итак, здесь this установлено значение ChildCtrl $scope. Внутри метода $scope по-прежнему является [scope] ParentCtrl.

Fiddle

Я пытаюсь не использовать this внутри функция, определенная в области $ scope, так как она запутывает, на какой объект влияет область видимости, особенно учитывая, что ng-repeat, ng-include, ng-switch и директивы могут создавать собственные дочерние области.