'це' проти $ області в контролерах AngularJS

У розділі «Створити компоненти» на головній сторінці AngularJS є такий приклад:

controller: function($scope, $element) {
  var panes = $scope.panes = [];
  $scope.select = function(pane) {
    angular.forEach(panes, function(pane) {
      pane.selected = false;
    });
    pane.selected = true;
  }
  this.addPane = function(pane) {
    if (panes.length == 0) $scope.select(pane);
    panes.push(pane);
  }
}

Зауважте, як selectметод додається $scope, але addPaneметод доданий this. Якщо я його зміню $scope.addPane, код порушується.

У документації йдеться про те, що насправді є різниця, але вона не вказує, у чому різниця:

Попередні версії Angular (до 1,0 RC) дозволяли вам використовувати thisвзаємозамінно $scopeметод, але це вже не так. Всередині методів , визначених на обсяг thisі $scopeє взаємозамінними (кутові набори thisв $scope), але не інакше всередині конструктора контролера.

Як працює thisі $scopeпрацює контролер AngularJS?

"Як працює thisі $scopeпрацює в контролерах AngularJS?"

Коротка відповідь :

• this
  • Коли викликається функція конструктора контролера, thisє контролером.
  • Коли функція, визначена на $scopeоб'єкті, викликається, thisце "область дії, коли функція викликалася". Це може бути (а може і не бути!), $scopeЩо функція визначена на. Отже, всередині функції може бути thisі не однаково.$scope
• $scope
  • Кожен контролер має пов'язаний $scopeоб’єкт.
  • Функція контролера (конструктора) відповідає за встановлення властивостей моделі та функцій / поведінки на пов'язаних з ними $scope.
  • З $scopeHTML / перегляду доступні лише методи, визначені на цьому об'єкті (та батьківські об'єкти, якщо прототипне успадкування відтворюється). Наприклад, від ng-click, фільтри тощо.

Довга відповідь :

Функція контролера - це функція конструктора JavaScript. Коли виконується функція конструктора (наприклад, коли вигляд завантажується), this(тобто "контекст функції") встановлюється об'єкт контролера. Так у функції конструктора контролера "вкладки", коли створена функція addPane

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

він створюється на об'єкті контролера, а не на $ range. Перегляди не можуть бачити функцію addPane - вони мають доступ лише до функцій, визначених у $ range. Іншими словами, в HTML це не працює:

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

Після виконання функції конструктора контролерів "tabs" у нас є наступне:

Пунктирна чорна лінія вказує на прототипне успадкування - область ізоляції, прототипічно успадковується від Scope . (Це прототипно не успадковує сферу дії, де діють директиви в HTML.)

Тепер функція зв’язку директиви панелі хоче спілкуватися з директивою вкладок (що насправді означає, що їй потрібно певним чином впливати на ізоляцію вкладок $). Події можуть бути використані, але інший механізм полягає в тому, щоб директива панелі requireкерувала вкладками. (Здається, не існує механізму для директиви панелі до requireвкладок $ range.)

Отже, тут виникає питання: якщо ми маємо доступ лише до контролера вкладок, як нам отримати доступ до вкладок ізолювати $ область (що саме ми насправді хочемо)?

Ну, червона пунктирна лінія - це відповідь. "Область" функції addPane () (я маю на увазі тут функцію / закриття функції JavaScript) надає функції функції доступ до вкладок ізолювати $ область. Тобто addPane () має доступ до "вкладок IsolateScope" на діаграмі вище через закриття, яке було створено, коли addPane () було визначено. (Якби ми замість цього визначили addPane () на вкладці $ range object, директива панелі не мала б доступу до цієї функції, і, отже, вона не мала б можливості спілкуватися з вкладками $ range.)

Щоб відповісти на іншу частину вашого питання how does $scope work in controllers?:

У межах функцій, визначених у $ range, 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(Єдино) є

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

Клацання першого посилання покаже, що це thisі $scopeте саме, оскільки " область дії, яка функціонувала, коли функція викликалася ", є сферою, пов'язаною з ParentCtrl.

При натисканні на другу посилання покаже , thisі $scopeце НЕ те ж саме, так як « сфера діє , коли функція була викликана » є областю , пов'язаний з ChildCtrl. Отже, тут thisвстановлено значення ChildCtrl's $scope. Всередині методу $scopeвсе ще знаходиться ParentCtrl$ s.

Скрипка

Я намагаюся не використовувати thisвсередині функції, визначеної на $ range, оскільки стає заплутаним, на який впливає область $, особливо враховуючи, що ng-повторення, ng-включення, ng-перемикач і директиви можуть створити власні дочірні області.

Причина "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будучи найбільш очевидними, але якщо все , що вам потрібно прив'язати дані до подання, використовуючи звичайний контролер і контролер «як» в шаблоні добре і , можливо , краще.

Я рекомендую вам прочитати наступне повідомлення: AngularJS: "Контролер як" або "$ область"?

Він дуже добре описує переваги використання "Controller as" для викриття змінних над "$ range".

Я знаю, що ви конкретно запитували про методи, а не про змінні, але я вважаю, що краще дотримуватися однієї методики та дотримуватися її.

Тож, на мою думку, через проблему змінних, що обговорюються у публікації, краще просто скористатися технікою "Контролер як", а також застосувати її до методів.

У цьому курсі ( https://www.codeschool.com/courses/shaping-up-with-angular-js ) вони пояснюють, як використовувати "це" та багато інших речей.

Якщо ви додаєте метод до контролера методом "цей", вам доведеться викликати його у поданні з назвою контролера "крапкою" вашого властивості чи методу.

Наприклад, використовуючи контролер у поданні, у вас може бути такий код:

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

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

    </div>

Попередні версії Angular (до 1,0 RC) дозволяли вам використовувати це взаємозамінно методом $ range, але це вже не так. Всередині методів, визначених в області застосування, це і область $ є взаємозамінними (кутовий встановлює цей параметр в область "$"), але не інакше всередині вашого конструктора контролера.

Щоб повернути цю поведінку (хтось знає, чому вона була змінена?), Ви можете додати:

return angular.extend($scope, this);

наприкінці вашої функції контролера (за умови, що в цю функцію контролера було введено $ range).

Це приємно впливає на доступ до батьківської області через об'єкт контролера, до якого ви можете отримати дитину require: '^myParentDirective'

$ range має інше "this", то контролер "this". Тому якщо ви помістите console.log (this) всередину контролера, він дає вам об'єкт (controller), а this.addPane () додає метод addPane до об'єкта контролера. Але діапазон $ має різну сферу застосування, і до всіх методів в його області потрібно звертатися за допомогою $ range.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>