角的js新手 - 在控制器视图链接触发另一个控制器动作 [英] Angular Js newbie - link in a controller view that triggers another controller action

问题描述

角新手在这里。

比方说，我有一个需要监控，如新闻提交了登录attemps等不同的东西的应用程序。我mainController其职责是获取有关这些操作的信息，从服务获取这些数据并显示在一个简单的仪表盘这些信息。

Let's say I have an application that needs to monitor different things like "news submitted" "login attemps" and so on. My mainController which responsibility is to get information about those operations, fetch those data from a service and display these information in a simple dashboard.

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

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

我想使数据的数字点击，并通过点击他们，我想应用程序（不改变路线）的相对的div被点击的数据细节显示。
因此，例如新闻列表提交或登录attemps细节。
我想有提交新闻的细节处理，并在其自己的控制器登录attemps。

I would like to make the data numbers clickable and by clicking on them I'd like the app (without changing route) to display in the relative div the details of the data being clicked. So for example news submitted list or login attemps details. I'd like to have the handling of the details of news submitted and login attemps in their own controller.

问题是：如何才能让一个NG-click事件，告诉角度来调用另一个控制器的特定功能

The problem is: how can I make a ng-click event that tells angular to invoke a specific function of another controller?

推荐答案

这是它如何工作 -

This is how it would work -

1. 从mainController，散发出一股向上事件（通过$放出）。
   调用$事件名称向上穿过范围层次发出通知调度注册$ rootScope.Scope听众。

1. from your mainController, emit an event upwards (through $emit). Call to $emit dispatches an event name upwards through the scope hierarchy notifying the registered $rootScope.Scope listeners.

在newsController和loginAttemptsController添加事件侦听器（使用$ rootScope。$）来听取mainController发出该事件，从目标范围的数据（在你的情况下，其mainController的范围），并将其设置为newsController和loginAttemptsController的范围模式。

Inside newsController and loginAttemptsController add an event listener (using $rootScope.$on) to listen to the event emitted from mainController, get data from the target scope (in your case its mainController's scope) and set it to newsController and loginAttemptsController's scope model.

有关详细信息，通过角文档 - https://docs.angularjs.org/api/纳克/类型/ $ rootScope.Scope

for details go through angular documentation - https://docs.angularjs.org/api/ng/type/$rootScope.Scope

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

I have set up a plunk here - http://plnkr.co/edit/1dhdPfmB1WwAkYhsz4Hv

例子code（HTML模板）：

Example code (html template) :

<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>

例子code（主控制器）：

Example code (main controller) :

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

}]);

例子code（新闻控制器）：

Example code (news Controller) :

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

}]);

例子code（loginAttempts控制器）：

Example code (loginAttempts Controller) :

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;

    });


}]);

这篇关于角的js新手 - 在控制器视图链接触发另一个控制器动作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！