Angular Js新手-控制器视图中的链接触发另一个控制器动作

Question

有角的新手在这里。

假设我有一个应用程序，它需要监视不同的事物，例如“提交的新闻”，“登录尝试次数”等等。我的mainController的职责是获取有关这些操作的信息，从服务中获取这些数据并在简单的仪表板上显示这些信息。

<div ng-controller='mainController'>
      + ---------------------+
      | NEWS Submitted: 1233 |
      | Login attempts: 233  |
      + ---------------------+
</div>

<div ng-controller='newsController'></div>
<div ng-controller='loginAttemptsController'></div>

我想使数据编号可单击，然后单击它们，我希望该应用程序（不更改路线）在相对div中显示所单击数据的详细信息。因此，例如新闻提交列表或登录尝试的详细信息。我想在自己的控制器中处理所提交新闻的详细信息并尝试登录。

问题是：如何使ng-click事件告诉angular调用另一个控制器的特定功能？

Answer 1

这就是它的工作方式-

1. 从您的mainController向上发出一个事件（通过$ emit）。对$ emit的调用通过范围层次结构向上调度事件名称，通知已注册的$ rootScope.Scope侦听器。

2. 在newsController和loginAttemptsController内部，添加一个事件侦听器（使用$ rootScope。$ on）来侦听mainController发出的事件，从目标作用域（在您的情况下为mainController的作用域）获取数据，并将其设置为newsController和loginAttemptsController的作用域模型。

有关详细信息，经过角文档-
https://docs.angularjs.org/api/ng/type/
$ rootScope.Scope

我已经在这里设立了普拉克-
http://plnkr.co/edit/1dhdPfmB1WwAkYhsz4Hv

示例代码（html模板）：

<div ng-controller="mainController">
    <button data-ng-click="OnNewButtonClick()">Show News</button>
    <button data-ng-click="OnLoginAttemptButtonClick()">Show Login Attempts</button>

</div>
<div ng-controller="newsController">
    {{newsControllerData.News}}
</div>
<div ng-controller="loginAttemptsController">
    {{loginAttemptsControllerData.loginAttempts}}
</div>

示例代码（主控制器）：

app.controller("mainController", ["$rootScope", "$scope", function ($rootScope, $scope) {

    $scope.newsControllerData = {};
    $scope.loginAttemptsControllerData = {};

    // from mainController emit HandleNews upwards on the scope
    $scope.OnNewButtonClick = function () {
        $scope.newsControllerData.info = "Hello World";
        $scope.$emit("HandleNews");
    }

    // from mainController emit HandleLoginAttempts upwards on the scope
    $scope.OnLoginAttemptButtonClick = function () {
        $scope.loginAttemptsControllerData.info = "login count = 4";
        $scope.$emit("HandleLoginAttempts");
    }

}]);

示例代码（新闻控制器）：

app.controller("newsController", ["$rootScope", "$scope", function ($rootScope, $scope) {

    $scope.newsControllerData = {};

    // when any controller calls HandleNews, i would listen
    $rootScope.$on("HandleNews", function (evt, next, current) {
        $scope.newsControllerData.News = evt.targetScope.newsControllerData.info;
    });

}]);

示例代码（loginAttempts控制器）：

app.controller("loginAttemptsController", ["$rootScope", "$scope", function ($rootScope, $scope) {

    $scope.loginAttemptsControllerData = {};

    // when any controller calls HandleLoginAttempts, i would listen
    $rootScope.$on("HandleLoginAttempts", function (evt, next, current) {
        $scope.loginAttemptsControllerData.loginAttempts = evt.targetScope.loginAttemptsControllerData.info;

    });


}]);