Angular Js newbie - ссылка в виде контроллера, запускающая другое действие контроллера

Угловой новичок здесь.

Допустим, у меня есть приложение, которое должно отслеживать разные вещи, такие как "отправленные новости", "попытки входа" и так далее. Мой mainController, ответственный за получение информации об этих операциях, получение этих данных из службы и отображение этой информации на простой панели инструментов.

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

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

Я бы хотел, чтобы номера данных были кликабельными, и, нажимая на них, я бы хотел, чтобы приложение (без изменения маршрута) отображало в относительном блоке детали данных, по которым щелкали. Так, например, новости, представленные в списке или детали попыток входа в систему. Я хотел бы, чтобы обработка деталей представленных новостей и попыток входа осуществлялась в их собственном контроллере.

Проблема заключается в следующем: как я могу создать событие ng-click, которое сообщает angular вызвать конкретную функцию другого контроллера?

Источник

2 ответа

Решение

Вот как это будет работать -

  1. из вашего mainController отправьте событие вверх (через $emit). Call to $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;

    });


}]);
Источник

Вы можете создать сервис, который будет хранить данные между контроллерами. Затем вы можете использовать / изменить этот фрагмент данных как в ваших контроллерах, так и в связанных представлениях.

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

Источник
Другие вопросы по тегам