如何在 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()" 动作时，它需要去哪里执行？

我们不能在 ng-Controller 目录中写入 serviceName。

那么我需要在我的代码中更改什么才能使其正常工作？

Answer 1

如果您想保留 $rootScope 中的所有内容，您也可以将其添加到您的服务中：

$rootScope.CommonSrv = CommonSrv;

然后您可以直接从 HTML 中的此服务访问 hideAlert，您不需要任何 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>

如何在 angularjs 中创建通用警报功能

How to create common function for alert in angularjs

angularjs

angularjs-controller

angularjs-templates