Как создать общую функцию для оповещения в angularjs

Question

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

мой сервис

JodoModule.service("CommonSrv", function ($rootScope) {
this.showAlert = function (message, status) {
    $rootScope.alertMessage = message;
    $rootScope.showAlert = status;
}
this.hideAlert = function () {
    $rootScope.showAlert = false;
}

})

ControllerOne,

$rootScope.CommonSrv = CommonSrv;
    CommonSrv.showAlert("No notifications available", true);

ControllerTwo,

$rootScope.CommonSrv = CommonSrv;
    CommonSrv.showAlert("No data available", true);

Контроллер вызывает сервисы, и я могу видеть содержимое div на экране

На мой взгляд,

<div ng-show="showAlert" class="alertCustom">
    <label>{{alertMessage}}</label>
    <br /><br />
    <a ng-click="CommonSrv.hideAlert()" class="btn btn-warning  btn-sm">
        &nbsp; <span style="color:brown; font-weight:bold">OK</span> &nbsp;
    </a>
</div>

Здесь у меня есть общий шаблон, и я назначаю "alertMessage" и "showAlert", который работает нормально. Но что я должен написать вместо "???whichName??? " контроллера.

Потому что я хочу использовать один и тот же сервис с разных контроллеров. но когда я вызываю "hideAlert()" действие, куда оно должно пойти и выполнить?

Мы не можем написать serviceName в каталоге ng-Controller.

Так что мне нужно изменить в моем коде, чтобы он работал?

Answer 1

Если вы хотите сохранить все в $rootScopeВы также можете добавить к нему свой сервис:

$rootScope.CommonSrv = CommonSrv;

Вы можете получить доступ hideAlert непосредственно из этого сервиса в HTML, вам не нужно никаких ng-controller, Вот шаблон:

<div ng-show="showAlert" class="alertCustom">
    <label>{{alertMessage}}</label>
    <br /><br />
    <a ng-click="CommonSrv.hideAlert()" class="btn btn-warning  btn-sm">
        &nbsp; <span style="color:brown; font-weight:bold">OK</span> &nbsp;
    </a>
</div>

И чтобы быть чистым, я бы порекомендовал сохранить alertMessage а также showAlert внутри этой службы, а не в корневой области, она становится:

JodoModule.service("CommonSrv", function ($rootScope) {
  this.showAlert = function (message, status) {
    this.alertMessage = message;
    this.showAlert = status;
  }

  this.hideAlert = function () {
    this.showAlert = false;
  }
})

И HTML:

<div ng-show="CommonSrv.showAlert" class="alertCustom">
    <label>{{CommonSrv.alertMessage}}</label>
    <br /><br />
    <a ng-click="CommonSrv.hideAlert()" class="btn btn-warning  btn-sm">
        &nbsp; <span style="color:brown; font-weight:bold">OK</span> &nbsp;
    </a>
</div>