Подтвердить что ты не робот

Использование $emit в angular 1.5 компоненте

Я использую компонент angular 1.5 и мне нужно вызвать функцию в родительском контроллере, когда $emit в дочернем компоненте. Как мы можем это сделать?

Пример:

(function (angular) {
    'use strict';

    controllerName.$inject = [];

    function controllerName() {
       var _this = this;
       function toBeCalledOnEmit() {//some code}
       var vm = {
          toBeCalledOnEmit: toBeCalledOnEmit
       }
       angular.extend(_this, vm);
    }

    angular.module('moduleName', [
    ]).component('parentComponenet', {
        templateUrl: 'templateUrl',
        controller: 'controllerName'
    }).controller('controllerName', controllerName);

})(angular);

дочерний компонент:

(function (angular) {
    'use strict';

    childController.$inject = [];

    function childController() {
       //needs $emit here
    }

    angular.module('childModuleName', [
    ]).component('childComponent', {
        templateUrl: 'templateUrl',
        controller: 'childController'
    }).controller('childController', childController);

})(angular);
4b9b3361

Ответ 1

Я предпочитаю работать с отдельной службой событий, которая предоставляет функции подписки и уведомления. Но если вы предпочитаете излучать из дочернего компонента, это будет выглядеть так:

Детский компонент

    (function (angular) {
    'use strict';

      function childController($scope) {
       $scope.$emit("someEvent", args); 
      }

      angular.module('childModuleName', [
      ]).component('childComponent', {
        templateUrl: 'templateUrl',
        controller: ['$scope', childController]
      });

    })(angular);

Родительский компонент

    (function (angular) {
    'use strict';


      function controllerName($scope) {
         var _this = this;

         function toBeCalledOnEmit(event, args) {
            //some code
         }
         $scope.on('someEvent', toBeCalledOnEmit);

         var vm = {
            toBeCalledOnEmit: toBeCalledOnEmit
         }
         angular.extend(_this, vm);
      }

      angular.module('moduleName', [
      ]).component('parentComponent', {
          templateUrl: 'templateUrl',
          controller: ['$scope', controllerName]
      });

    })(angular);

Ответ 2

Код прилагается ниже:

  • Детский компонент:

    (function (angular) {
        'use strict';
    
    childController.$inject = ['$scope'];
    
    function childController($scope) {
    
       //needs $emit here
    $scope.$emit("topic-123", 'any message'); 
    }
    
    angular.module('childModuleName', [
    ]).component('childComponent', {
        templateUrl: 'templateUrl',
        controller: 'childController'
    }).controller('childController', childController);
    

    }) (angular);

  • Родительский компонент:

    (function (angular) {
    'use strict';
    
    controllerName.$inject = ['$scope'];
    
    function controllerName($scope) {
       var _this = this;
       function toBeCalledOnEmit() {//some code}
       var vm = {
          toBeCalledOnEmit: toBeCalledOnEmit
       }
    
       $scope.$on('topic-123', function(event, msg) {
      // @TODO  
      toBeCalledOnEmit();
       });
    
       angular.extend(_this, vm);
    }
    
    angular.module('moduleName', [
    ]).component('parentComponenet', {
        templateUrl: 'templateUrl',
        controller: 'controllerName'
    }).controller('controllerName', controllerName);
    

    }) (angular);

Ответ 3

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

дочерний компонент:

(function (angular) {
 'use strict';

 childController.$inject = ['$rootScope'];

 function childController($rootScope) {
   $rootScope.$emit('myEvent',$scope.data)
 }
})(angular);

Родительский компонент:

(function (angular) {
 'use strict';

 controllerName.$inject = ['$rootScope'];

 function controllerName($rootScope) {
   var _this = this;
   function toBeCalledOnEmit() {//some code}
   var vm = {
      toBeCalledOnEmit: toBeCalledOnEmit
   }
   $rootScope.$on('myEvent', function(event, msg) {
     toBeCalledOnEmit();
   });
   angular.extend(_this, vm);
 }
})(angular);