Angular Js 新手 - 控制器视图中的链接触发另一个控制器操作 [英] Angular Js newbie - link in a controller view that triggers another controller action
问题描述
角度新手在这里.
假设我有一个应用程序需要监控不同的事情，比如新闻提交"登录尝试"等等.我的 mainController 负责获取有关这些操作的信息，从服务中获取这些数据并将这些信息显示在一个简单的仪表板中.
+ ---------------------+|新闻提交:1233 ||登录尝试:233 |+ ---------------------+<div ng-controller='newsController'></div><div ng-controller='loginAttemptsController'></div>
我想让数据编号可点击，通过点击它们，我希望应用程序(不更改路线)在相关 div 中显示被点击数据的详细信息.因此，例如新闻提交列表或登录尝试详细信息.我想在自己的控制器中处理提交的新闻和登录尝试的详细信息.
问题是:如何制作一个 ng-click 事件，告诉 angular 调用另一个控制器的特定功能?
这就是它的工作方式 -
从你的 mainController 向上发出一个事件(通过 $emit).调用 $emit 通过作用域层次向上调度事件名称，通知已注册的 $rootScope.Scope 侦听器.
在 newsController 和 loginAttemptsController 中添加一个事件监听器(使用 $rootScope.$on)来监听从 mainController 发出的事件，从目标范围(在你的例子中是 mainController 的范围)获取数据并将其设置为 newsController和 loginAttemptsController 的范围模型.
有关详细信息，请参阅角度文档 - https://docs.angularjs.org/api/ng/type/$rootScope.Scope
我在这里设置了一个 plunk - http://plnkr.co/edit/1dhdPfmB1WwAkYhsz4Hv
示例代码(html 模板):
<button data-ng-click="OnNewButtonClick()">显示新闻</button><button data-ng-click="OnLoginAttemptButtonClick()">显示登录尝试</button><div ng-controller="newsController">{{newsControllerData.News}}
<div ng-controller="loginAttemptsController">{{loginAttemptsControllerData.loginAttempts}}
示例代码(主控制器):
app.controller("mainController", ["$rootScope", "$scope", function ($rootScope, $scope) {$scope.newsControllerData = {};$scope.loginAttemptsControllerData = {};//从 mainController 在作用域上向上发出 HandleNews$scope.OnNewButtonClick = 函数 () {$scope.newsControllerData.info = "Hello World";$scope.$emit("HandleNews");}//从 mainController 在作用域上向上发出 HandleLoginAttempts$scope.OnLoginAttemptButtonClick = 函数 () {$scope.loginAttemptsControllerData.info = "登录计数 = 4";$scope.$emit("HandleLoginAttempts");}}]);示例代码(新闻控制器):
app.controller("newsController", ["$rootScope", "$scope", function ($rootScope, $scope) {$scope.newsControllerData = {};//当任何控制器调用 HandleNews 时，我会听$rootScope.$on("HandleNews", function (evt, next, current) {$scope.newsControllerData.News = evt.targetScope.newsControllerData.info;});}]);示例代码(登录尝试控制器):
app.controller("loginAttemptsController", ["$rootScope", "$scope", function ($rootScope, $scope) {$scope.loginAttemptsControllerData = {};//当任何控制器调用 HandleLoginAttempts 时，我会听$rootScope.$on("HandleLoginAttempts", function (evt, next, current) {$scope.loginAttemptsControllerData.loginAttempts = evt.targetScope.loginAttemptsControllerData.info;});}]);angular newbie here.
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>
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.
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 -
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.
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.
for details go through angular documentation - https://docs.angularjs.org/api/ng/type/$rootScope.Scope
I have set up a plunk here - http://plnkr.co/edit/1dhdPfmB1WwAkYhsz4Hv
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>
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");
}
}]);
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;
});
}]);
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;
});
}]);
这篇关于Angular Js 新手 - 控制器视图中的链接触发另一个控制器操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
