Javascript 任何控制器 angularjs 中的火灾通知烤面包机
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26309573/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fire notification toaster in any controller angularjs
提问by Rafael Soufraz
I am using this service for notifications: https://github.com/jirikavi/AngularJS-Toaster
Is working perfectly. Already configured for that anywhere in my application I create a pop () button, clicking the trigger notification toaster.
What I need now is any controller in my application, can call triggering the notification method.
For example, within the controller ProductController, I call pop () at any time and then the notification would be triggered.
Despite any view the pop () method function within the controller does not work at all.
Is there some detail I'm not watching?
我正在使用此服务进行通知：https: //github.com/jirikavi/AngularJS-Toaster
运行良好。已经在我的应用程序中的任何地方为此配置了我创建了一个 pop () 按钮，单击触发器通知烤面包机。
我现在需要的是我的应用程序中的任何控制器，可以调用触发通知方法。
比如在控制器ProductController中，我随时调用pop()，就会触发通知。
尽管有任何视图，控制器中的 pop() 方法函数根本不起作用。
有什么细节我没看吗？
My index.html
我的 index.html
<!DOCTYPE html>
<html lang="en" data-ng-app="app">
<head>
<meta charset="utf-8" />
<title>My App</title>
<meta name="description" content="app, web app, responsive, responsive layout, admin, admin panel, admin dashboard, flat, flat ui, ui kit, AngularJS, ui route, charts, widgets, components" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="css/animate.css" type="text/css" />
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="css/simple-line-icons.css" type="text/css" />
<link rel="stylesheet" href="css/font.css" type="text/css" />
<link rel="stylesheet" href="css/app.css" type="text/css" />
<link rel="stylesheet" href="js/modules/toaster/toaster.css" type="text/css" />
</head>
<body ng-controller="AppCtrl">
<div class="app" id="app" ng-class="{'app-header-fixed':app.settings.headerFixed, 'app-aside-fixed':app.settings.asideFixed, 'app-aside-folded':app.settings.asideFolded, 'app-aside-dock':app.settings.asideDock, 'container':app.settings.container}" ui-view></div>
<!-- jQuery -->
<script src="js/jquery/jquery.min.js"></script>
<!-- Angular -->
<script src="js/libs/angular/angular.js"></script>
<script src="js/libs/angular/angular-cookies.js"></script>
<script src="js/libs/angular/angular-animate.js"></script>
<script src="js/libs/angular/angular-resource.js"></script>
<script src="js/libs/angular/angular-ui-router.js"></script>
<script src="js/libs/angular/ngStorage.js"></script>
<script src="js/libs/angular/ocLazyLoad.js"></script>
<script src="js/libs/angular/ui-bootstrap-tpls.js"></script>
<script src="js/angular/angular-translate.js"></script>
<script src="js/angular/ui-jq.js"></script>
<script src="js/angular/ui-load.js"></script>
<script src="js/angular/ui-validate.js"></script>
<!-- App -->
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/controller-university.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="js/modules/toaster/toaster.js"></script>
<!-- Lazy loading -->
</body>
</html>
My view when the notification toaster is fire by click 'pop()' (it works perfectly):
当通过单击“pop()”触发通知烤面包机时，我的视图（效果很好）：
<div class="bg-light lter b-b wrapper-md">
<h1 class="m-n font-thin h3">Universities</h1>
</div>
<div class="wrapper-md">
<!-- toaster directive -->
<toaster-container toaster-options="{'position-class': 'toast-top-right', 'close-button':true}"></toaster-container>
<!-- / toaster directive -->
<div class="col-sm-6">
<form name="formCreate" class="form-validation" ng-submit="insert()">
<div class="panel panel-default">
<div class="panel-heading">
<span class="h4">Create</span>
</div>
<div class="panel-body">
<div class="form-group pull-in clearfix">
<div class="col-sm-6">
<label>Nome</label>
<input type="text" name="name" class="form-control" maxlength="40" ng-model="university.name" required >
</div>
</div><!--./form-group-->
</div>
<footer class="panel-footer text-right bg-light lter">
<button type="submit" class="btn btn-success">Save</button>
<button class="btn btn-success" ng-click="pop()">pop()</button>
</footer>
</div>
</form>
</div>
</div>
My controller:
我的控制器：
'use strict';
angular.module('app.controller-university', ['ngCookies'])
.controller('UniversityCtrl', ['$stateParams', '$scope', '$window', 'University',
function($stateParams, $scope, $window, University ) {
$scope.pop();
}]);
The file controllers.js. Where is the AppCtrl:
文件controller.js。AppCtrl 在哪里：
'use strict';
/* Controllers */
angular.module('app.controllers', ['pascalprecht.translate', 'ngCookies'])
.controller('AppCtrl', ['$rootScope', '$scope', '$translate', '$localStorage', '$window', 'toaster',
function( $rootScope, $scope, $translate, $localStorage, $window, toaster ) {
// add 'ie' classes to html
var isIE = !!navigator.userAgent.match(/MSIE/i);
isIE && angular.element($window.document.body).addClass('ie');
isSmartDevice( $window ) && angular.element($window.document.body).addClass('smart');
$scope.toaster = {
type: 'success',
title: 'Title',
text: 'Message'
};
$scope.pop = function(){
toaster.pop($scope.toaster.type, $scope.toaster.title, $scope.toaster.text);
};
}])
This is my app.js
这是我的 app.js
'use strict';
// Declare app level module which depends on filters, and services
var app = angular.module('app', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngStorage',
'ui.router',
'ui.bootstrap',
'ui.load',
'ui.jq',
'ui.validate',
'oc.lazyLoad',
'pascalprecht.translate',
'app.filters',
'app.services',
'app.directives',
'app.controllers',
'app.controller-university',
'UniversityService',
'toaster',
])
.run(
[ '$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}
]
)
.config(
[ '$stateProvider', '$urlRouterProvider', '$controllerProvider', '$compileProvider', '$filterProvider', '$provide',
function ($stateProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {
// lazy controller, directive and service
app.controller = $controllerProvider.register;
app.directive = $compileProvider.directive;
app.filter = $filterProvider.register;
app.factory = $provide.factory;
app.service = $provide.service;
app.constant = $provide.constant;
app.value = $provide.value;
$urlRouterProvider
.otherwise('/app/dashboard-v1');
$stateProvider
.state('app', {
abstract: true,
url: '/app',
templateUrl: 'tpl/app.html',
})
.state('app.dashboard-v1', {
url: '/dashboard-v1',
templateUrl: 'tpl/app_dashboard_v1.html'
})
/////////////////////////
// University
//////////////////////////////////////////
.state('app.university', {
url: '/universidade',
template: '<div ui-view class="fade-in-up"></div>'
})
.state('app.university.list', {
url: '/listar',
templateUrl: 'tpl/university/list.html',
controller: 'UniversityCtrl',
})
.state('app.university.create', {
url: '/criar',
templateUrl: 'tpl/university/create.html',
controller: 'UniversityCtrl',
})
回答by Hyman.the.ripper
you can use angular-toasterreference it to your index.html page and also add the css, after that configure the directive at the bottom of the page as the following:
您可以使用angular-toaster 将其引用到您的 index.html 页面并添加 css，然后将页面底部的指令配置如下：
<toaster-container toaster-options="{
'closeButton': false,
'debug': false,
'position-class': 'toast-top-right',
'onclick': null,
'showDuration': '200',
'hideDuration': '1000',
'timeOut': '5000',
'extendedTimeOut': '1000',
'showEasing': 'swing',
'hideEasing': 'linear',
'showMethod': 'fadeIn',
'hideMethod': 'fadeOut'
}"></toaster-container>
then add it to your angular module dependencies as 'toaster' (you already did it well) so after that you'll be able to inject toaster service on any controller you want like the following:
然后将它添加到您的 angular 模块依赖项中作为“烤面包机”（您已经做得很好），这样之后您就可以在您想要的任何控制器上注入烤面包机服务，如下所示：
angular.module('myApp').controller('myController', [
'$scope', 'toaster', function($scope,toaster) {
toaster.pop('success', 'message', 'some message');
}]);
as the documentation says you can use a wide variety of options:
正如文档所说，您可以使用多种选项：
toaster.pop('success', "title", 'Its address is https://google.com.', 15000, 'trustedHtml', 'goToLink');
toaster.pop('success', "title", '<ul><li>Render html</li></ul>', 5000, 'trustedHtml');
toaster.pop('error', "title", '<ul><li>Render html</li></ul>', null, 'trustedHtml');
toaster.pop('wait', "title", null, null, 'template');
toaster.pop('warning', "title", "myTemplate.html", null, 'template');
toaster.pop('note', "title", "text");
so take a look to this plunkr
所以看看这个plunkr
回答by AndreiC
i use the toastr in the following manner:
我以下列方式使用 toastr：
Include toastr in your index html:
在您的索引 html 中包含 toastr：
<script type="text/javascript" src="/vendor/toastr/toastr.min.js"></script>
Define a factory which you can inject in any controller:
定义一个可以注入任何控制器的工厂：
angular.module('app').value('ngToastr',toastr);
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);
}
}
});
After that you can inject this module in any controller:
之后，您可以将此模块注入任何控制器：
angular.module('app').controller('myCtrl',function($scope, ngNotifier) {
ngNotifier.notifyError($scope.validationError);
});
回答by Fergus
.factory('notifierService',function(toaster){
return{
notify: function(msg){
toaster.pop('success', 'Update Successful', 'The ' + msg + ' setting was updated');
},
notifyError: function(msg){
toaster.pop('error', 'Something Went Wrong', 'Please check with an administrator');
},
notifyInfo: function(msg){
toaster.pop('info', 'Information', 'The ' + msg + 'just happened' );
}
};
})
on the $resourcepromise
关于$resource承诺
.$promise.then(function() {
notifierService.notify('email server');
});
