'this' vs $ scope в контроллерах AngularJS

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

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

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

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

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

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

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

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

После выполнения функции конструктора контроллера "tabs" мы имеем следующее:

Пунктирная черная линия указывает на прототипное наследование - изоляционная область прототипа наследует от Scope. (Он не прототипически наследуется от области действия, в которой директива встречается в HTML.)

Теперь функция ссылки на панели управления должна связываться с директивой tabs (что на самом деле означает, что она должна каким-то образом повлиять на вкладки, изолировать $scope). Можно использовать события, но другим механизмом является наличие указателя панели require контроллера табуляции. (Кажется, нет механизма для директивы панели для require вкладки $scope.)

Итак, это ставит вопрос: если у нас есть только доступ к контроллеру табуляции, как мы получим доступ к вкладкам, изолируем $scope (что мы действительно хотим)?

Ну, красная пунктирная линия - это ответ. Функция "scope" функции addPane() (я имею в виду область функций/закрытия JavaScript здесь) дает функции доступа к вкладкам изолировать $scope. I.e., addPane() имеет доступ к "вкладкам IsolateScope" на диаграмме выше из-за закрытия, которое было создано, когда была определена addPane(). (Если мы вместо этого определяем addPane() в объекте облака tabs $, директива панели не будет иметь доступа к этой функции, и, следовательно, у нее не будет возможности связываться с областью вкладок $.)

Чтобы ответить на другую часть вашего вопроса: how does $scope work in controllers?:

В функциях, определенных в области $scope, this устанавливается значение "$ scope", в котором/когда функция была вызвана ". Предположим, что мы имеем следующий 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 по-прежнему остается ParentCtrl $scope.

Fiddle

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