如何从angularjs中的另一个page2(service2.html）控制器(ctrl2）调用page1(servi

how to call function of page1(service1.html) controller( ctrl1 ) from another page2(service2.html) controller( ctrl2 ) in angularjs

本文关键字：控制器 html ctrl2 调用 servi page1 service2 angularjs page2 另一个      更新时间：2023-09-26

我尝试调用page1（service1.html）控制器（ctrl1）的函数来自angularjs中的另一个page2（service2.html）控制器（ctrl2）。这两个页面都有父控制器（parentcrl）。任何人都可以给我解决这个问题的想法。。

示例代码：

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>

相关文章：