实现单个方法或在 AngularJs 中使用 $scope.on 和 $scope.emit 将在没有服务的情况下在多个控制器中调用相同的方法

Question

我知道过去有人问过类似的问题，但我希望能更好地了解我的具体问题。

我有多个 controllers 管理单个页面的 view。这样做的主要原因是每个 controller 的功能都大不相同，而且我还组合了一些以前在单独的 views 上的功能。这也不是创建 service 就能解决的问题。我只需要 "kick-start" 两个 controllers.

这是我的问题： 我想在 view 上实现一个 date filter/method，它将调用相同的 method controllers 都执行其功能，并相应地更新 view。

编辑：如何使用 $scope.on 和 $scope.emit 或 $rootScope 来调用 controllers 中的函数？

根据这些先前发布的问题：

Question 1

Question 2

这里有两个controllers:

angular.module('portalDashboardApp')
  .controller('SocialMentionsAnalysisController', SocialMentionsAnalysisController);

angular.module('portalDashboardApp')
  .controller('SocialMentionsListController', SocialMentionsListController);

这是我单曲中的method调用 view:

ng-change="checkDate()

这是被调用的filter method：

注意： 每个 controllers 都有这个 method，我想通过我的 [= 调用这两个 methods 38=].

$scope.checkDate = function () {

    var dateValues = DatePickerService.checkDate($scope.dateFrom, $scope.dateTo);
    $scope.dateFrom = dateValues[0];
    $scope.dateTo = dateValues[1];
    $sessionStorage.dateFrom = dateValues[0];
    $sessionStorage.dateTo = dateValues[1];

    pullSocialData();

};

我研究过，this question也许是我需要的，但我不知道如何实现。

Answer 1

我希望我能正确理解这个问题，但你可以为此使用指令。除了使用 ng-change 之外，您还可以创建自己的指令，在输入更改时将其装箱并在此处检查日期。

例如，您的 javascript :

app.controller('Ctrl1', function($scope) { })
   .controller('Ctrl2', function($scope) { })
   .directive('checkDate', function(checkDateService) {
      return {
         restrict: 'A',
         scope: true,
         link: function(scope, element, attrs ){
           element.on('change', function() {
             scope.$apply(function() {
               checkDateService.checkDate(scope.from, scope.to);
             })
         });
    }
  }
 }).service('checkDateService', function() {
   return {
     checkDate: function(from, to) {
     console.log(from, to);
   }
 }

});

和HTML：

<body>
  <div ng-controller="Ctrl1">
    <input type="date" ng-model="from" check-date />
    <input type="date" ng-model="to" check-date />
  </div>
  <div ng-controller="Ctrl2">
    <input type="date" ng-model="from" check-date />
    <input type="date" ng-model="to" check-date />
  </div>
</body>

这里是与 plunker 相同的示例：https://plnkr.co/edit/Jqz7Zd4HF0WVBvkJHBbZ?p=preview

要在 HTML 上的内联 js 中使用事件，我认为您可以在 $rootScope 上（在运行配置中）定义一个方法来广播您的事件。此事件将由所有依赖于 $rootScope 的控制器触发。

在Javascript中：

app.run(function($rootScope) {
   $rootScope.brodcastDateChanged = function(dateFrom, dateTo) {
      $rootScope.$broadcast('dateChanged', {
         from: dateFrom,
         to: dateTo
      });
    };
})
.controller('Ctrl1', function($scope) { 
    $scope.$on('dateChanged', function(event, args) {
        console.log('event triggered from Ctrl1', args)
    });
 })
 .controller('Ctrl2', function($scope) {  
    $scope.$on('dateChanged', function(event, args) {
         console.log('event triggered from Ctrl2', args)
    });
  })
  .controller('Ctrl3', function($scope) {  
     $scope.$on('dateChanged', function(event, args) {
         console.log('event triggered from Ctrl3', args)
     });
   })

在HTML

<div ng-controller="Ctrl1">
  <input type="date" ng-model="from" ng-change="brodcastDateChanged(from, to)" />
  <input type="date" ng-model="to" ng-change="brodcastDateChanged(from, to)" />
</div>
<div ng-controller="Ctrl2">
  <input type="date" ng-model="from" ng-change="brodcastDateChanged(from, to)" />
  <input type="date" ng-model="to" ng-change="brodcastDateChanged(from, to)" />
</div>
<div ng-controller="Ctrl3">
  <input type="date" ng-model="from" ng-change="brodcastDateChanged(from, to)" />
  <input type="date" ng-model="to" ng-change="brodcastDateChanged(from, to)" />
</div>

Answer 2

具有相同名称的 $on 函数将通过其对应的单个 $emit 调用被调用。我的意思是，你在多个控制器中有多个 $on 函数，

$scope.$on('funtionToTrigger', function(event, args) {
//in first controller
});

$scope.$on('funtionToTrigger', function(event, args) {
//in second controller
});

$scope.$on('funtionToTrigger', function(event, args) {
//in third controller
});

注意：所有 $on 函数的名称都是相同的 'funtionToTrigger'。一旦你调用 $scope.$emit('funtionToTrigger', args); 然后所有三个 $on 函数将在所有三个控制器中运行。

所以在这里，你在每个控制器中都写了一个 $on 函数。

function SocialMentionsAnalysisController () {
    $scope.$on('funtionToTrigger', function(event, dateFrom, dateTo) {
    //your code for this controller.
    });
}

function SocialMentionsListController() {
    $scope.$on('funtionToTrigger', function(event, dateFrom, dateTo) {
    //your code for this controller.
    });
}

然后在 onChange 上调用 $emit。

ng-change="$emit('funtionToTrigger', dateFrom, dateTo)"

实现单个方法或在 AngularJs 中使用 $scope.on 和 $scope.emit 将在没有服务的情况下在多个控制器中调用相同的方法

Implement a single method or use $scope.on and $scope.emit in AngularJs that will call the same method in multiple controllers without a service

angularjs

angularjs-scope

emit