AngularJS: Как поделиться областью видимости функций и переменных с другими контроллерами

Question

У меня есть несколько контроллеров в моем приложении, где у меня есть несколько повторяющихся кодов, таких как:

$scope.alert = null;

$scope.addAlert = function (message) {
    $scope.alert = { type: 'danger', msg: message };
};

$scope.clearAlerts = function () {
    $scope.alert = null;
};

Каков рекомендуемый способ совместного использования этих функций области видимости и переменных в AngularJS? Использование контроллера наследования?

Answer 1

Создайте один контроллер и затем поместите общие методы в область действия этого контроллера. Так что вы можете использовать эту область в любом другом месте и получить доступ к методу внутри контроллера.

контроллер

app.controller('commonCtrl', function($scope) {
    $scope.alert = null;

    $scope.addAlert = function(message) {
        $scope.alert = {
            type: 'danger',
            msg: message
        };
    };

    $scope.clearAlerts = function() {
        $scope.alert = null;
    };
});

После этого используйте область действия этого контроллера, введя его с помощью $controllerи затем внутри фигурной скобки вы можете назначить общую область видимости контроллера текущей области видимости контроллера.

Использование общего контроллера

app.controller('testCtrl', function($scope, $controller) {
    //inject comomon controller scope to current scope , 
    //below line will add 'commonCtrl' scope to current scope
    $controller('commonCtrl', { $scope: $scope }); 
    //common controller scope will be available from here

});

Или более точным способом было бы использовать общий разделяемый сервис, который выставил два метода и alert данные, вы можете использовать этот метод обслуживания, введя имя службы внутри вашего контроллера.

обслуживание

app.service('commonService', function($scope) {
    this.alert = null;

    this.addAlert = function(message) {
        this.alert = {
            type: 'danger',
            msg: message
        };
    };

    this.clearAlerts = function() {
        this.alert = null;
    };
});

Использование сервиса внутри контроллера

app.controller('testCtrl', function($scope, commonService) {

  console.log(commonService.alert);
  commonService.addAlert("Something");
  console.log("Updated Alert" + commonService.alert);

});

Надеюсь, это прояснило вашу концепцию, спасибо.

Answer 2

Мое собственное решение для этого варианта использования было определить тип шаблона наблюдателя.

Код был структурирован следующим образом:

var app = angular.module('testModule', []);
app.factory('alertService', ['$timeout', function($timeout){
    var alertListeners = [];

    this.register = function (listener) {
        alertListeners.push(listener);
    };

    this.notifyAll = function (data) {
    for (// each listener in array) {
        var listenerObject = alertListeners[i];
        try { // do not allow exceptions in individual listeners to corrupt other listener processing
            listenerObject.notify(data);
        } catch(e) {
            console.log(e);
        }   
    }
    };
 }]).
 directive('myAlerts', ['alertService', function(alertService){

     var alertDirectiveObserver = function($scope, alertService) {

        this.notify = function(data) {
        /*
         * TO DO - use data to show alert
         */
         };

         /*
          * Register this object as an event Listener. Possibly supply an event key, and listener id to enable more resuse
          */
         alertService.register(this);

         $scope.on('$destroy', function() {
             alertService.unregister(// some listener id);
         });
     };


   return {
     restrict: 'A',
     template: '<div ng-class="alertClass" ng-show="alertNeeded">{{alertMessage}}</div>',
     controller: ['$scope', 'alertService', alertDirectiveObserver],
     link: function(scope){  
     }
    }
}]).
controller('alertShowingController', ['$scope', 'alertService',   function($scope, alertService){
    alertService.notifyAll({'warning', 'Warning alert!!!'})   
 ]);

alertShowingController это простой пример того, как все контроллеры могут просто ввести alertService и создать событие.

Моя собственная реализация более сложна в том смысле, что она использует отдельные ключи событий, чтобы позволить контроллерам генерировать другие уведомления о событиях.

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

<div my-alerts ng-repeat="alert in alertList" type="{{alert.type}}" close="closeAlert(alertList, $index)">{{alert.msg}}</div>