如何从另一个控制器调用一个控制器功能[重复]

Question

这个问题在这里已有答案：

• How to transfer the data between controllers 4个答案

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

<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

当你想与兄弟控制器通信时，你必须使用qazxsw poi来捕获事件（$ on）。用这个

rootScope

演示

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

});

Answer 2

正如您向

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

询问使用服务的解决方案，这是一个例子。

我创建了2个使用单一服务（here）的控制器（FirstCtrl，SecondCtrl）。

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

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

Answer 3

使用

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

：

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

});

上使用$on监听器。当控制器被移除时，$rootScope上的监听器将被自动正确销毁。

有关AngularJS事件总线的更多信息，请参阅

• $scope
• AngularJS Developer Guide - Scope Event Propagation