Что такое $on() в AngularJS

Ответ 1

$on связан с $broadcast и $emit - это способ запуска кода из других мест.

Первое, что нужно знать о $on, это то, что это метод $scope

Во-вторых, вы должны знать, что префикс $относится к Angular методу, $$ префиксы относятся к Angular методам, которые следует избегать.

Теперь давайте подробно рассмотрим, что такое $on.

Ниже приведен пример шаблона и его контроллеров. Мы рассмотрим, как $broadcast/$on может помочь нам достичь желаемого.

<div ng-controller="FirstCtrl">
    <input ng-model="name"/> 
    <button ng-click="register()">Register </button>
</div>

<div ng-controller="SecondCtrl">
    Registered Name: <input ng-model="name"/> 
</div>

Контроллеры

app.controller('FirstCtrl', function($scope){
    $scope.register = function(){

    }
});

app.controller('SecondCtrl', function($scope){

});

Мой вопрос к вам в том, как вы передаете имя второму контроллеру, когда пользователь нажимает регистр? Вы можете придумать несколько решений, но тот, который мы собираемся использовать, использует $broadcast и $on.

$broadcast vs $emit

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

Лучший способ избежать выбора между $emit или $broadcast - это канал из $rootScope и использовать $broadcast для всех своих детей. Это делает наш случай намного проще, поскольку наши элементы dom являются братьями и сестрами.

Добавление $rootScope и разрешение $broadcast

app.controller('FirstCtrl', function($rootScope, $scope){
    $scope.register = function(){
        $rootScope.$broadcast('BOOM!', $scope.name)
    }
});

Заметьте, мы добавили $rootScope, и теперь мы используем $broadcast (broadcastName, arguments). Для broadcastName мы хотим дать ему уникальное имя, чтобы мы могли поймать это имя в нашем secondCtrl. Я выбрал BOOM! просто для удовольствия. Аргументы второго аргумента позволяют нам передавать значения слушателям.

Получение нашей широковещательной рассылки

В нашем втором контроллере нам нужно настроить код для прослушивания нашей трансляции

app.controller('SecondCtrl', function($scope){
  $scope.$on('BOOM!', function(events, args){
    console.log(args);
    $scope.name = args; //now we've registered!
  })
});

Это действительно так просто. Живой пример

Другие способы достижения аналогичных результатов

Попытайтесь избежать использования этого набора методов, поскольку он не является ни эффективным, ни легким в обслуживании, но это простой способ исправить проблемы, которые могут возникнуть.

Обычно вы можете делать то же самое, используя сервис или упрощая свои контроллеры. Мы не будем обсуждать это подробно, но я думал, что просто упомянул об этом для полноты.

Наконец, имейте в виду, что действительно полезная передача для прослушивания - это "$ destroy" снова, вы можете видеть, что $означает, что это метод или объект, созданный кодами поставщика. Anyways $destroy передается, когда контроллер уничтожается, вы можете слушать это, чтобы узнать, когда ваш контроллер удален.