Angularjs 如何从角度控制器或模块控制toastr选项(或全局设置)
基于向应用程序/控制器中注入toastr。我已按如下方式设置了我的app.js:Angularjs 如何从角度控制器或模块控制toastr选项(或全局设置),angularjs,toastr,Angularjs,Toastr,基于向应用程序/控制器中注入toastr。我已按如下方式设置了我的app.js: (function () { app = angular.module("app", ['breeze.angular']).value('ngToastr', toastr); //added toaster as factory so it can be injected into any controller angular.module('app').factory('ngNotif
(function () {
app = angular.module("app", ['breeze.angular']).value('ngToastr', toastr);
//added toaster as factory so it can be injected into any controller
angular.module('app').factory('ngNotifier', function (ngToastr) {
return {
notify: function (msg) {
ngToastr.success(msg);
},
notifyError: function (msg) {
ngToastr.error(msg);
},
notifyInfo: function (msg) {
ngToastr.info(msg);
}
}
});
})();
正如其中一个答案所述,我现在可以从任何控制器访问toastr控件
app.controller('reportController', function ($scope, reportLibraryService, ngNotifier, $log) {
//report section
var rvm = this;
rvm.getReportList = GetReportList;
rvm.onError = OnError;
rvm.onReportComplete = OnReportComplete;
$scope.userId = 1;
GetReportList($scope.userId);
function OnReportComplete(response) {
$scope.reportList = response;
ngNotifier.notify("Reports Loaded");
};
function OnError(reason) {
$scope.error = "Could not fetch the data.";
$log.error(reason);
};
function GetReportList(userId) {
$log.info("Getting reports for userid " + userId)
reportLibraryService.getAllReports($scope.userId).then(rvm.onReportComplete, rvm.onError);
};
});
我的问题是如何覆盖默认选项?到目前为止,我已经尝试了两种方法。首先使用选项集在html中添加toastr div,这不起作用。然后我试着在工厂里添加它们,但在那里它们也被忽略了
angular.module('app').factory('ngNotifier', function (ngToastr) {
return {
notify: function (msg) {
ngToastr.success(msg);
ngToastr.options = {
"closeButton": false,
"debug": false,
"progressBar": false,
"positionClass": "toast-bottom-right",
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
}, ...
作为第二部分,这是toastr的正确工具使用或我应该使用角烤面包机,而不是因为这是一个角应用程序?在我的应用程序中,我目前没有任何jQuery依赖项
感谢您的建议因为“AngularJS Toaster”是“toastr”jQuery库的AngularJS端口,所以最好在AngularJS应用程序中使用它
我以类似的方式使用它,在HTML模板中设置选项时没有遇到如下问题:
<toaster-container toaster-options="{'position-class': 'toast-bottom-right', 'close-button': true, 'body-output-type': 'trustedHtml', 'showDuration': '400', 'hideDuration': '200',}"></toaster-container>
对于那些试图覆盖特定通知,而不是简单地覆盖全局默认值的人,我能够做到这一点,但有一个陷阱。我想在成功消息消失时使错误持续(将超时设置为0)。因此,对于正常的快乐路径通知,我只使用:
toaster.success('Nothing to see here folks', 'Move along');
但是对于错误,我希望消息保持不变,这样他们就可以显示他们的管理器,写下错误消息,不管什么。对于原始的toastr项目,这很容易,您只需传递一个覆盖选项的JSON对象作为最后一个参数,例如:
toastr.error('Original toastr example', 'Click to dismiss', {timeOut: 0});
Angularjs toaster不同,您将参数传递给pop函数
但这并不奏效:
toaster.pop({
type: 'error',
title: 'Need More Information',
body: 'Error 42 occurred, run for the hills!',
timeOut: 0
});
我查看了toaster.js代码(我使用的是版本0.4.15),看起来您可以将有序参数传递给pop,而不是JSON对象。这确实奏效了:
toaster.pop(
'error',
'Need More Information',
'Error 42 occurred, run for the hills!',
0 );
当然,我更喜欢传递一个带有命名参数的对象,而不是一堆未标记的参数。我仔细查看了他们的代码,发现他们将区分大小写的时间从超时改为超时!!!这项工作:
toaster.pop({
type: 'error',
title: 'Need More Information',
body: 'Error 42 occurred, run for the hills!',
timeout: 0
});
如果您有一个基本角度控制器,您可以在那里添加站点范围的angular.options。然后,如果需要,可以覆盖toastung控制器中所需的选项
toastr.options = {
"closeButton": true,
"debug": false,
"newestOnTop": false,
"progressBar": true,
"positionClass": "toast-top-right",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
只需将
toastr
选项放入app.config
app.config(["toastrConfig",function(toastrConfig) {
var options = {
"closeButton": true,
"debug": false,
"newestOnTop": false,
"progressBar": true,
"positionClass": "toast-top-right",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
angular.extend(toastrConfig, options);
})]);