Что такое событие изменения контроллера в угловом? это то же самое, что и $ watch модель?

Question

Я пытаюсь вычислить угловое module (Этот вопрос не является специфическим для модуля, который я изучаю, но только о сильном синтаксическом выражении, который я не понял) и внутри его основной директивы, контроллер был принят к функции связи, а затем слушатель изменить событие подсел к нему:

schedulerCtrl.on = { 
     change: function (itemIndex, scheduleIndex, scheduleValue) { 
      var onChangeFunction = $parse(attrs.onChange)(scope); 
      if (angular.isFunction(onChangeFunction)) { 
       return onChangeFunction(itemIndex, scheduleIndex, scheduleValue); 
      } 
     } 
}; 

(этот патрон коды существует в ng-weekly-scheduler.js file в строке 362.)

attrs.onChange получаются из декларации директивы в HTML который выглядит следующим образом:

<weekly-scheduler class="scheduler" items="model.items" on-change="demo.doSomething" on-delete="demo.doSomething" options="model.options"> 
     <div class="srow">{{::$index + 1}}. {{item.label}}</div> 
</weekly-scheduler> 

Я никогда не слышал о настройке приемника событий на угловой контроллер. Поэтому, пожалуйста, кто-нибудь может сказать мне, что это значит и с какой частью углового API это связано?!

Answer 1

weekly-scheduler - это директива третьей стороны, которую вы получаете, когда вводите требуемый модуль (я думаю, его weeklyScheduler). Итак, теперь у вас есть диспетчер планировщика, отображаемый на вашей странице. Теперь скажите, что вы хотите выполнить некоторую логику, когда что-то изменится внутри планировщика - например, вы хотите создать/обновить новое событие и сохранить его в базе данных - для этого вам нужно получить обратный вызов с требуемыми значениями из планировщика к вашему методу контроллера.

Это были & Связывание директив - & Связывание - это передача метода в область действия вашей директивы, чтобы его можно было вызвать в вашей директиве. Таким образом, в вашем случае вы привязываете метод doSomething к привязке onChangeFunction (exposed as onChange) к директиве, которая в свою очередь вызывается, когда некоторые изменения модели происходят внутри планировщика. return onChangeFunction(itemIndex, scheduleIndex, scheduleValue);. Таким образом, в вашем методе контроллера вы получите itemIndex, scheduleIndex и scheduleValue, связанные с изменение произошло.

Подробнее здесь - https://thinkster.io/egghead/isolate-scope-am

«&» оператор позволяет вызвать или оценить выражение на родительской области из любой директивы находится внутри.

Answer 2

Я автор этой директивы, и в самом деле формулировка здесь может сбивать с толку ...

На самом деле, эта часть кода:

schedulerCtrl.on = { 
     change: function (itemIndex, scheduleIndex, scheduleValue) { 
     ... 
     } 
}; 

является не с помощью встроенный механизм angularJS для установки прослушивателя событий в контроллере. Угловой $on слушателей на областей, но это другая функция.

Код ссылки только функцию с именем change на объекте schedulerCtrl.on (on может пчела переименована в foo ... это не имеет значения. Это, действительно, может привести к путанице, особенно если уже используется JQuery).

change метод явно называется впоследствии (линия 546), когда изменение инициируется в нг-модели изменения (Здесь $parsers встроенный в поведении ngModelController).Обратите внимание на префикс $ от $parsers, $watcher, $on ... на угловые внутренние объекты api или api.

//// UI -> model //////////////////////////////////// 
ngModelCtrl.$parsers.push(function onUIChange(ui) { 
    ... 
    schedulerCtrl.on.change(index, scope.$index, ngModelCtrl.$modelValue); 
    .... 
}); 

Вкратце:

• schedulerCtrl имеет свойство on, которая является простой объект JS (не используется угловой) ссылки на change функцию.
• Это change вызывается встроенный ngModelController ngModelCtrl при обнаружении изменения в модели (например, когда пользователь сдвигает временные полосы)