Question

我尝试调用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'});
  };
});

Answer 1

您的代码存在的问题是，当您在路线service2时，service1的范围将被销毁，反之亦然。所以你不能这样通过它。

您可以使用工厂存储邮件，也可以将收到的值发布并存储在$rootScope的变量中。

使用$rootScope或工厂，您可以在收到路线后将收到的值添加到$scope变量。

我认为工厂更好/更清洁，但两者都可以。

请查看下面的演示或jsfiddle。（它使用$rootScope方法。）

＆＃13;

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);
  });

＆＃13;

<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>

＆＃13;

如何从angularjs中的另一个page2（service2.html）控制器（ctrl2）调用page1（service1.html）控制器（ctrl1）的功能

1 个答案: