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

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

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

• this
  • When the controller constructor function is called, this is the controller.
  • Когда вызывается функция, определенная для объекта $scope, this является «областью действия, когда функция была вызвана». Это может быть (а может и не быть!) $scope, на котором определена функция. Таким образом, внутри функции this и $scope могут не совпадать.
• $scope
  • Every controller has an associated $scope object.
  • Функция контроллера (конструктора) отвечает за установку свойств модели и функций / поведения связанных с ней $scope.
  • Только методы, определенные в этом объекте $scope (и объекты родительской области, если используется прототипное наследование), доступны из HTML / представления. Например, из ng-click, фильтры и т. Д.

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

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

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

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

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

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

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

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

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

Что ж, красная пунктирная линия - это ответ. «Область действия» функции addPane () (здесь я имею в виду область / закрытие функции JavaScript) дает функции доступ к вкладкам, изолирующим $ scope. То есть addPane () имеет доступ к «вкладкам IsolateScope» на диаграмме выше из-за закрытия, которое было создано при определении addPane (). (Если бы вместо этого мы определили addPane () в объекте tabs $ scope, директива pane не имела бы доступа к этой функции, и, следовательно, у нее не было бы возможности взаимодействовать с tabs $ scope.)

Чтобы ответить на другую часть вашего вопроса: 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 (Исключительно) имеет

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

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

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

Fiddle

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

Причина, по которой ему назначено 'addPane', связана с директивой <pane>.

Директива pane выполняет require: '^tabs', который помещает объект контроллера вкладок из родительской директивы в функцию ссылки.

addPane назначается this, так что функция ссылки pane может его видеть. Затем в функции ссылки pane addPane - это просто свойство контроллера tabs, и это просто tabsControllerObject.addPane. Таким образом, функция связывания директивы панели может получить доступ к объекту контроллера вкладок и, следовательно, получить доступ к методу addPane.

Надеюсь, мое объяснение достаточно ясное ... это довольно сложно объяснить.

Я только что прочитал довольно интересное объяснение разницы между ними и растущее предпочтение прикреплять модели к контроллеру и использовать псевдоним контроллера для привязки моделей к представлению. http://toddmotto.com/digging-into-angulars-controller-as-syntax/ - это статья.

ПРИМЕЧАНИЕ. Исходная ссылка все еще существует, но из-за изменений форматирования ее трудно читать. Легче просмотреть в оригинале.

Он не упоминает об этом, но при определении директив, если вам нужно поделиться чем-то между несколькими директивами и вам не нужна услуга (есть законные случаи, когда услуги являются проблемой), тогда прикрепите данные к контроллеру родительской директивы.

Служба $scope предоставляет множество полезных вещей, из которых $watch является наиболее очевидным, но если все, что вам нужно для привязки данных к представлению, использование простого контроллера и 'controller as' в шаблоне нормально и, возможно, предпочтительнее.

Я рекомендую вам прочитать следующий пост: AngularJS: "Controller as" или "$ scope" ?

Он очень хорошо описывает преимущества использования «Контроллер как» для раскрытия переменных по сравнению с «$ scope».

Я знаю, что вы спрашивали конкретно о методах, а не о переменных, но я думаю, что лучше придерживаться одной техники и согласовываться с ней.

Так что, на мой взгляд, из-за проблемы переменных, обсуждаемой в посте, лучше просто использовать технику «Контроллер как», а также применить ее к методам.

В этом курсе (https://www.codeschool.com/courses/shaping-up-with-angular-js) они объясняют, как использовать this и многое другое.

Если вы добавляете метод к контроллеру через метод «this», вы должны вызывать его в представлении с именем контроллера «точка» вашего свойства или метода.

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

    <div data-ng-controller="YourController as aliasOfYourController">

       Your first pane is {{aliasOfYourController.panes[0]}}

    </div>

Предыдущие версии Angular (до 1.0 RC) позволяли использовать это взаимозаменяемо с методом $ scope, но это уже не так. Внутри методов, определенных в области видимости, this и $ scope взаимозаменяемы (angular устанавливает this в $ scope), но не внутри конструктора вашего контроллера.

Чтобы вернуть это поведение (кто-нибудь знает, почему оно было изменено?), Вы можете добавить:

return angular.extend($scope, this);

в конце вашей функции контроллера (при условии, что $ scope была введена в эту функцию контроллера).

Это дает хороший эффект доступа к родительской области через объект контроллера, который вы можете получить в дочернем элементе с помощью require: '^myParentDirective'

$ scope имеет другое 'this', чем контроллер 'this'. Таким образом, если вы поместите console.log (this) внутри контроллера, он даст вам объект (контроллер), а this.addPane () добавляет метод addPane к объекту контроллера. Но $ scope имеет другую область видимости, и все методы в ее области должны приниматься $ scope.methodName (). this.methodName() внутри контроллера означает добавление методов внутри объекта контроллера .$scope.functionName() находится в HTML и внутри

$scope.functionName(){
    this.name="Name";
    //or
    $scope.myname="myname"//are same}

Вставьте этот код в свой редактор и откройте консоль, чтобы увидеть ...

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>this $sope vs controller</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
    <script>
        var app=angular.module("myApp",[]);
app.controller("ctrlExample",function($scope){
          console.log("ctrl 'this'",this);
          //this(object) of controller different then $scope
          $scope.firstName="Andy";
          $scope.lastName="Bot";
          this.nickName="ABot";
          this.controllerMethod=function(){

            console.log("controllerMethod ",this);
          }
          $scope.show=function(){
              console.log("$scope 'this",this);
              //this of $scope
              $scope.message="Welcome User";
          }

        });
</script>
</head>
<body ng-app="myApp" >
<div ng-controller="ctrlExample">
       Comming From $SCOPE :{{firstName}}
       <br><br>
       Comming from $SCOPE:{{lastName}}
       <br><br>
       Should Come From Controller:{{nickName}}
       <p>
            Blank nickName is because nickName is attached to 
           'this' of controller.
       </p>

       <br><br>
       <button ng-click="controllerMethod()">Controller Method</button>

       <br><br>
       <button ng-click="show()">Show</button>
       <p>{{message}}</p>

   </div>

</body>
</html>