我尝试调用page1（service1.html）控制器（ctrl1）的函数
来自angularjs中另一个page2（service2.html）控制器（ctrl2）。
两个页面都有父控制器（parentctrl）。任何人都可以给我
解决这个问题的主意..
样例代码：
app.controller("parentctrl", function($scope) {
$scope.$on('emitdata', function(event, data) {
$scope.$broadcast('broadcast-data', data);
});
});
Page 1 : service1.html
app.controller("ctrl1", function($scope) {
$scope.$on('broadcast-data', function(event, data) {
$scope.received = data;
})
});
Page 2 : service2.html
app.controller("ctrl2", function($scope) {
$scope.emit = function() {
$scope.$emit('emitdata', {'key': 'uu'});
};
});
最佳答案
代码的问题在于，当您在路线service2上时，service1的范围将被破坏，反之亦然。
因此，您不能像这样通过它。
您可以使用存储消息的工厂，也可以在$rootScope的变量处发出并存储接收到的值。
使用$rootScope或工厂，您可以在输入路径后将接收到的值添加到$scope变量中。
我认为工厂更好/更清洁，但都可以。
请查看下面的演示或此jsfiddle。 （它使用$rootScope方法。）
angular.module('demoApp', ['ngRoute'])
.controller("parentctrl", function($rootScope, $scope) {
$scope.$on('emitdata', function(event, data) {
//$scope.$broadcast('broadcast-data', data);
$rootScope.received = data;
});
})
.controller("ctrl1", function($rootScope, $scope) {
$scope.received = $rootScope.received || 'nothing received';
/*scope.$on('broadcast-data', function(event, data) {
$scope.received = data;
console.log('received data', data)
});*/
})
.controller("ctrl2", function($scope) {
$scope.emit = function() {
$scope.$emit('emitdata', {'key': 'uu'});
};
})
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/service1', {
templateUrl: 'service1.html',
controller: 'ctrl1'
})
.when('/service2', {
templateUrl: 'service2.html',
controller: 'ctrl2'
})
.otherwise({redirectTo:'/service1'});
// configure html5 to get links working on jsfiddle
//$locationProvider.html5Mode(true);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js"></script>
<div ng-app="demoApp" ng-controller="parentctrl">
<script type="text/ng-template" id="service1.html">
Service page 1
{{received}}
</script>
<script type="text/ng-template" id="service2.html">
Service page 2
<button ng-click="emit()">call service 1</button>
</script>
<div ng-view=""></div>
<a href="#/service1">service 1 page</a>
<a href="#/service2">service 2 page</a>
</div>