我知道过去也有人问过类似的问题，但我希望能对我的具体问题有一个更好的了解。
我有多个controllers管理单个页面的view。这样做的主要原因是每个controller的功能有很大的不同，我还把以前单独在views上的一些功能结合起来。这也不是通过创建service来解决的问题。我只需要"启动"两个controllers。
这是我的问题:我想在view上实现单个date filter/method，这将在两个controllers中调用相同的method来完成其功能，并相应地更新view。
编辑:如何使用$scope.on和$scope.emit，或$rootScope在controllers中调用函数?
根据这些先前发布的问题:
问题1
问题2
以下是两个controllers:
angular.module('portalDashboardApp')
.controller('SocialMentionsAnalysisController', SocialMentionsAnalysisController);
angular.module('portalDashboardApp')
.controller('SocialMentionsListController', SocialMentionsListController);
这是我的单个view中的method调用:
ng-change="checkDate()
这是被调用的filter method:
注意:每个controllers都有这个method，我想通过我的single method call称它们为methods。
$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();
};
我做了研究，这个问题可能是我需要的，但我不知道如何实现
具有相同名称的$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函数的名字都是相同的' functiontotrigger '。一旦调用$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)"
我希望我能正确理解这个问题，但是你可以使用这个指令。比起使用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 =
预览要在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)
});
})
<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>