Question

首先想到我是棱角分明的新人。我试图从1个控制器调用1个函数到另一个控制器。

ng-click=mapUsers1()事件发出2警报但
没有ng-click=mapUsers1()它只提供1个

这是角度的特征还是我做错了什么......？

1.这是$ emit

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body ng-app="myApp">

  <script>
    var app = angular.module('myApp', []);

    app.controller('myCtrl2', function($scope, $rootScope) {

      $rootScope.$on("call_mapUsers_Method", function() {
        $scope.mapUsers();
      })

      $scope.mapUsers = function() {
        alert("done....");
      }
    });

    app.controller('myCtrl1', function($scope, $rootScope) {
      $scope.mapUsers1 = function() {
        alert('test');
        $rootScope.$emit("call_mapUsers_Method", {});
      }
      $scope.mapUsers1();
    });
  </script>

  <div ng-controller="myCtrl1">
    <button ng-click="mapUsers1()">click</button>
    <div ng-controller="myCtrl2"></div>
  </div>


</body>

</html>

1.这是使用$ broadcast

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body ng-app="myApp">

  <script>
    var app = angular.module('myApp', []);

    app.controller('myCtrl2', function($scope, $rootScope) {

      $rootScope.$on("call_mapUsers_Method", function() {
        $scope.mapUsers();
      })

      $scope.mapUsers = function() {
        alert("done....");
      }
    });

    app.controller('myCtrl1', function($scope, $rootScope) {
      $scope.mapUsers1 = function() {
        alert('test');
        $rootScope.$broadcast("call_mapUsers_Method", {});
      }
      $scope.mapUsers1();
    });
  </script>

  <div ng-controller="myCtrl1">
    <button ng-click="mapUsers1()">click</button>
    <div ng-controller="myCtrl2"></div>
  </div>


</body>

</html>

编辑：我添加了$ emit和$ broadcast的示例。加载它只会提供1个警报，但点击按钮会发出2个警报，这看起来很奇怪

Answer 1

在您的父myCtrl2控制器初始化$scope.mapUser1()时，您的子控制器myCtrl1尚未初始化。这就是您的孩子控制器$rootScope.$on()在那一刻没有收听的原因。您需要触发一个新的挖掘周期，例如使用$timeout：

在我看来，你应该使用工厂或服务在不同的控制器之间进行通信。这个答案将对您有所帮助：Share data between AngularJS controllers。

<强>＆GT; Demo fiddle

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

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

  $rootScope.$on("call_mapUsers_Method", function() {
    $scope.mapUsers();
  });

  $scope.mapUsers = function() {
    alert("done....");
  }
});

app.controller('myCtrl1', function($scope, $rootScope, $timeout) {
  $scope.mapUsers1 = function() {
    alert('test');
    $rootScope.$broadcast("call_mapUsers_Method", {});
  }

  $timeout(function() {
    $scope.mapUsers1();
  });
});

Answer 2

你不能这样。 $ emit函数将使事件“冒出来”＃34;从范围发射到rootScope。

$ emit（name，args）; =＆GT;通过范围层次结构向上调度事件名称，通知已注册的$ rootScope.Scope侦听器。 from doc

所以你的事件不是从myCtrl1下降到myCtrl2

要向下发送活动，您需要使用$ broadcast

$ broadcast（name，args）; =＆GT;将事件名称向下调度到所有子范围（及其范围）孩子们）通知已注册的$ rootScope.Scope听众。（同样的文档）

这样做：

app.controller('myCtrl1', function($scope, $rootScope) {
    $scope.mapUsers1 = function() {
        alert('test');
        $rootScope.$broadcast("call_mapUsers_Method", {});
    }

    $scope.mapUsers1();
});

使用$ emit或$ broadcast从1控制器调用的函数

2 个答案: