使用AngularJS中的事件从另一个控制器调用函数。

27 浏览
0 Comments

使用AngularJS中的事件从另一个控制器调用函数。

我是一个AngularJS的新手。

我正在尝试从另一个控制器调用函数。

我发现有几种方法可以做到这一点。

1）共享服务

2）使用事件

这是我已经查看过的链接。

一个控制器可以调用另一个控制器吗

如何在AngularJS中将一个控制器注入到另一个控制器中

我认为使用事件是更好的方法。另外，我认为当我们使用$rootscope时，它不会销毁事件引用，对吗？

var myModule = angular.module('myapp', []);
myModule.controller('otherController', function($scope) {
  $scope.$on('ShowDialog', function(event) {
    alert("你好");
  });
});
myModule.controller('myController', function($scope) {
  $scope.OnClick = function() {
    alert("完成");
    $scope.$emit('ShowDialog');
  }
});

请告诉我我漏掉了什么？什么是最好的方法？

0

2 答案

0 Comments

在AngularJS中，使用事件从另一个控制器调用函数的问题出现了几个原因。首先，没有实例化otherController，所以它不会执行任何代码。因此，需要添加一个带有ng-controller="otherController"的div元素。现在，有了这两个控制器的实例后，为了使用$scope事件（$emit，$broadcast，$on）进行通信，它们需要嵌套，因为作用域事件依赖于元素的层次结构。 $scope.$emit将事件注册到父控制器，$scope.$broadcast将事件注册到子控制器。可以通过移动嵌套的div并更改事件类型来修改下面的代码片段。

如果应用程序的构建方式阻止了嵌套控制器，可以使用$rootScope事件。它们的工作方式如下：$rootScope.$broadcast将事件广播到rootScope以及作用域。这将使你的代码变得非常混乱，因为任何控制器的任何作用域都可以监听到此事件。而$rootScope.$emit则更适合，它在整个应用程序中注册事件，并且只能在rootScope中访问。这样写可以让你的代码变得混乱，因为来自不同控制器的事件名称可能会冲突，并且最终会很难维护。

如果仍然想使用事件，应该记住解绑它们，否则会导致内存泄漏问题和其他难以解决的错误。下面是一个示例代码：

var unbind = $rootScope.$on('logout', function(event, data) {
    console.log('LOGOUT', data);
});
$scope.$on('$destroy', unbind); //当控制器被卸载时，解绑事件

使用$scope或$rootScope事件进行简单的数据操作被认为是不好的做法，除非这些操作在整个应用程序中都有意义。如果只是想让一个控制器知道某些随机数据已加载，那么应该使用服务（例如，统计控制器不需要知道用户是否更改了他的个人资料图片）。这被认为是不好的做法，因为你最终会有很多事件从不同的控制器注册，事件名称可能会冲突，而且最终很难维护。

0
0 Comments

在这个例子中，如果你想知道为什么它不起作用，原因是每个控制器都有自己的作用域。你在myController中发出了'ShowDialog'事件，并在otherController中进行了检查。但是ShowDialog只会在myController中可用。这就是为什么我们在$rootScope上使用emit的确切原因，因为它是全局的，可以在任何控制器中访问。

在这里有几种方法可以实现你所要求的功能。请查看并告诉我是否有帮助。

0