Question

角度新手在这里。

让我们说我有一个应用程序需要监控不同的事情，例如＆＃34;提交的新闻＆＃34; ＆＃34;登录尝试＆＃34;等等。我的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

这就是它的工作原理 -

向上发出一个事件（通过$ emit）。调用$ emit会通过范围层次结构向上调度事件名称，通知已注册的$ rootScope.Scope侦听器。
在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 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;

    });


}]);

Answer 2

您可以创建一个服务，该服务将在控制器之间存储数据。然后，您可以在两个控制器和相关视图中使用/更改该数据。

app.service('newsDataService', function() {

        this.newsData = [];

});

然后在你的控制器中，

app.controller('newsController', function($scope, 'newsDataService') {

    // access the data using newsDataService.newsData.

});


app.controller('loginAttemptsController', function($scope, 'newsDataService') {

    // access the data using newsDataService.newsData.

});

有关AngularJs服务的更多信息：https://docs.angularjs.org/guide/services

Angular Js newbie - 在控制器视图中链接，触发另一个控制器操作

2 个答案: