如何在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」，這是工作的罰款。但是我應該寫什麼來代替 「??? which ???」控制器。

因爲我想使用來自不同控制器的相同服務。但是當我調用「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>