功能未从1个控制器调用到另一个具有$ emit或$广播的功能

首先认为我是Angular的新手。我试图从1个控制器调用1个函数。

使用ng-click=mapUsers1()事件给出2个警报，但
没有ng-click=mapUsers1()，它仅提供1个pop

是Angular的此功能还是我做错了什么……？

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.这是$广播

<!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和$广播的示例。加载它只会给出1个警报，但是单击按钮将给出2个警报，这似乎是奇怪的

当您在父 myCtrl1控制器init上发射 $scope.mapUser1()时，您的子控制器myCtrl2不会初始化。这就是为什么您的子控制器$rootScope.$on()在那一刻不聆听的原因。您需要触发一个新的挖掘周期，例如通过使用$timeout：

我认为，您应该使用工厂或服务在不同的控制器之间进行交流。此答案将帮助您：在AngularJS控制器之间共享数据。

>演示小提琴

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

你不能这样。$ emit函数将使事件从发射范围到Rootscope。

$ emit(name，args(;=>通过示波器层次结构向上派遣事件名称，并通知已注册的$ rootscope.scope侦听器。来自Doc

，您的活动不会从myctrl1到myctrl2

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

$广播(名称，args(;=>将事件名称向下派遣到所有子范围(及其儿童(通知注册的$ rootscope.scope听众。(同一文档(

这样做：

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

相关内容

最新更新

热门标签：