如何从一个控制器调用另一个控制器的函数

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

当您想与Sibiling控制器进行通信时，必须使用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

您在此处要求使用服务的解决方案，这是一个示例。

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

请注意，该函数alertName()是在服务上定义的，每个控制器都可以使用它，因为每个控制器中的服务是注入。

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事件总线的更多信息，请参见

• Angularjs开发人员指南 - 范围事件传播
• angularjs rootscope/scope api参考