2

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

<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");调用 Ctrl1MyFunction但它不起作用。那不可能吗？

请在这里放一些光。

4

3 回答 3

2

当您想与兄弟控制器通信时，您必须使用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");
  }

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

于 2017-06-07T13:53:59.040 回答
2

正如您在此处要求使用服务的解决方案一样，这里有一个示例。

我创建了 2 个使用单个服务 ( ) 的控制器 ( FirstCtrl, )。SecondCtrlData

注意，函数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>

于 2017-06-07T14:15:18.733 回答
2

使用$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. 当控制器被移除时，监听器$scope将被正确地自动销毁。

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

于 2017-06-07T17:23:40.283 回答