Question

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

我有多个controllers管理单个页面的view。这样做的主要原因是每个controller的功能差异很大，而且我还将以前的一些功能组合在一起views。这也不是通过创建service来解决的问题。我只需要“启动”controllers。

这是我的问题：我想在date filter/method上实施一个view，在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同时调用这两个single method call。< / p>

$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 on functions＆＃39;名称相同＆＃39; funtionToTrigger＆＃39;。一旦你调用$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，它将在没有服务的情况下在多个控制器中调用相同的方法

2 个答案: