如何从另一个控制器调用一个控制器的功能

Question

我想知道是否可以从另一个控制器调用一个控制器的功能。我尝试过这种方式但失败了：

<div ng-app="MyApp">
    <div ng-controller="Ctrl1">
        <button ng-click="func1()">func1</button>
    </div>
    <br>
    <div ng-controller="Ctrl2">
        <button ng-click="func2()">func2</button>
    </div>
</div>

var app = angular.module('MyApp', []);

app.controller('Ctrl1', function($scope) {

  $scope.func1 = function() {
    alert('Ctrl1 and func1')
  }

    $scope.$on("MyFunction", function () {
        alert('Ctrl1 MyFunction')
    });
});

app.controller('Ctrl2', function($scope) {

  $scope.func2 = function() {
    alert('Ctrl2 and func2')
    $scope.$emit("MyFunction");
  }

});

当 func2 正在调用时，我使用 $scope.$emit("MyFunction"); 调用 Ctrl1 MyFunction 但它不起作用。那不可能吗？

请在这里点亮

Answer 1

当您想与同级控制器通信时，您必须使用 rootScope 捕获事件 ($on)。使用这个

$rootScope.$on("MyFunction", function () {
            alert('Ctrl1 MyFunction')
});

演示

var app = angular.module('MyApp', []);

app.controller('Ctrl1', function($scope,$rootScope) {

  $scope.func1 = function() {
    alert('Ctrl1 and func1')
  }

    $rootScope.$on("MyFunction", function () {
        alert('Ctrl1 MyFunction')
    });
});

app.controller('Ctrl2', function($scope) {

  $scope.func2 = function() {
    alert('Ctrl2 and func2')
    $scope.$emit("MyFunction");
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
    <div ng-controller="Ctrl1">
        <button ng-click="func1()">func1</button>
    </div>
    <br>
    <div ng-controller="Ctrl2">
        <button ng-click="func2()">func2</button>
    </div>
</div>

Answer 2

正如您向询问使用服务的解决方案一样，这里有一个示例。

我创建了 2 个使用单一服务 (Data) 的控制器 (FirstCtrl、SecondCtrl)。

注意service上定义了函数alertName()，每个controller都可以使用，因为service在每个controller里都是injected

var myApp = angular.module('myApp', []);

myApp.service('Data', function() {
  var name = 'Mistalis';
  return {
    alertName: function() {
      alert(name);
    }
  };
});

myApp.controller('FirstCtrl', function($scope, Data) {
  $scope.showName = function() {
    Data.alertName();
  }
});

myApp.controller('SecondCtrl', function($scope, Data) {
  $scope.showName = function() {
    Data.alertName();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="FirstCtrl">
    Controller 1<br/>
    <button ng-click="showName()">Show name from service</button>
  </div>
  <hr>
  <div ng-controller="SecondCtrl">
    Controller 2<br/>
    <button ng-click="showName()">Show name from service</button>
  </div>
</div>

Answer 3

使用$rootScope.$broadcast:

app.controller('Ctrl1', function($scope) {

  $scope.func1 = function() {
    alert('Ctrl1 and func1')
  }

    $scope.$on("MyFunction", function () {
        alert('Ctrl1 MyFunction')
    });
});

app.controller('Ctrl2', function($scope, $rootScope) {

  $scope.func2 = function() {
    alert('Ctrl2 and func2')
    //$scope.$emit("MyFunction");
    //USE rootScope
    $rootScope.$broadcast("MyFunction");
  }

});

最佳实践： 为避免内存泄漏，请避免在 $rootScope 上使用 $on 侦听器。 $scope 上的监听器将在移除控制器时自动正确销毁。

有关 AngularJS 事件总线的详细信息，请参阅

如何从另一个控制器调用一个控制器的功能

How to call one controller's function from another controller

javascript

angularjs

angularjs-controller

angularjs-1.6