在任何控制器angularjs消防通知烤面包机 [英] Fire notification toaster in any controller angularjs
本文介绍了在任何控制器angularjs消防通知烤面包机的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用该通知服务：<一href=\"https://github.com/jirikavi/AngularJS-Toaster\">https://github.com/jirikavi/AngularJS-Toaster
是可以正常使用。已经配置在我的应用程序，在任何地方创建一个弹出按钮（），点击触发通知烤面包机。结果
我现在需要的是在我的应用程序的任何控制器，可以调用触发的通知方法。结果
例如，控制器ProductController的内，我请随时弹出（），然后通知将被触发。结果
尽管任何视图控制器内的pop（）方法函数不会在所有的工作。结果
有一些细节我不看？
我的index.html
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =EN数据-NG-应用=应用程序＆GT;
＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8/＆GT;
＆LT;标题＆gt;我的应用程序和LT; /标题＆GT;
＆LT; META NAME =说明内容=应用程序，Web应用程序，反应灵敏，响应式布局，管理，管理面板，管理仪表板，平板，UI，UI套件，AngularJS，UI路线，图表，窗口小部件，组件/＆GT ;
＆LT; META NAME =视口CONTENT =WIDTH =设备宽度，初始规模= 1，最大规模= 1/＆GT;
＆LT;链接rel =stylesheet属性HREF =CSS / bootstrap.css类型=文/ CSS/＆GT;
＆LT;链接rel =stylesheet属性HREF =CSS / animate.css类型=文/ CSS/＆GT;
＆LT;链接rel =stylesheet属性HREF =CSS / FONT-awesome.min.css类型=文/ CSS/＆GT;
＆LT;链接rel =stylesheet属性HREF =CSS /简单线icons.css类型=文/ CSS/＆GT;
＆LT;链接rel =stylesheet属性HREF =CSS / font.css类型=文/ CSS/＆GT;
＆LT;链接rel =stylesheet属性HREF =CSS / app.css类型=文/ CSS/＆GT; ＆LT;链接rel =stylesheet属性HREF =JS /模块/多士炉/ toaster.css类型=文/ CSS/＆GT;＆LT; /头＆GT;
＆LT;机身NG控制器=AppCtrl＆GT;
＆LT; DIV CLASS =应用程序ID =应用程序NG-CLASS ={'应用头固定'：app.settings.headerFixed，应用程序预留固定'：app.settings.asideFixed，APP-抛开对折'：app.settings.asideFolded，应用程序休耕坞：app.settings.asideDock，容器：app.settings.container}UI-视图＆gt;＆LT; / DIV＆GT;
＆LT;！ - jQuery的 - ＆GT;
＆LT;脚本SRC =JS / jQuery的/ jquery.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;！ - 角 - ＆GT;
＆LT;脚本SRC =JS /库/角/ angular.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS /库/角/角cookies.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS /库/角/角animate.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS /库/角/角resource.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS /库/角/角-UI-router.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS /库/角/ ngStorage.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS /库/角/ ocLazyLoad.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS /库/角/ UI的引导-tpls.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS /角/角translate.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS /角/ UI-jq.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS /角/ UI-load.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS /角/ UI-validate.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;！ - 应用程序 - ＆GT;
＆LT;脚本SRC =JS / app.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS / services.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS / controllers.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS /控制器university.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS / filters.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS / directives.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本SRC =JS /模块/多士炉/ toaster.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;！ - 延迟加载 - ＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
我的看法时，通知烤面包机是火借点击弹出（）（它完美）：
＆LT; DIV CLASS =BG-光滤波器B-B包装-MD＆GT;
＆LT; H1类=M-N字型超薄H3＆GT;大学及LT; / H1＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =包装-MD＆GT; ＆LT;！ - 烤面包机指令 - ＆GT;
＆LT;烤面包机，多士炉容器选项={'位置类'：'烤面包右上，关闭按钮：真正}＆GT;＆LT; /多士炉容器＆GT;
＆LT;！ - /多士炉指令 - ＆GT; ＆LT; DIV CLASS =COL-SM-6＆GT;
＆LT;表格名称=FORMCREATE级=表单验证NG提交=插入（）＆GT;
＆LT; DIV CLASS =面板面板默认＆GT;
＆LT; DIV CLASS =面板标题＆GT;
＆LT;跨度类=H4＆GT;创建＆LT; / SPAN＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =面板体＆GT; ＆LT; DIV CLASS =表单组牵引clearfix＆GT; ＆LT; DIV CLASS =COL-SM-6＆GT;
＆LT;标签＆gt;＆诺姆LT; /标签＆gt;
＆LT;输入类型=文本名称=名字级=表格控MAXLENGTH =40NG-模式=university.name要求＆GT;
＆LT; / DIV＆GT; ＆LT; / DIV＆GT;＆LT; --./形式组 - ＆GT！; ＆LT; / DIV＆GT;
＆LT;页脚类=面板页脚文本右BG-光过滤器＆GT;
＆LT;按钮式=提交级=BTN BTN-成功＆GT;保存＆LT; /按钮＆GT;
＆LT;按钮类=BTN BTN-成功NG点击=弹出（）＆GT;流行（）＆LT; /按钮＆GT;
＆LT; /页脚＆GT;
＆LT; / DIV＆GT;
＆LT; /表及GT;
＆LT; / DIV＆GT;＆LT; / DIV＆GT;
我的控制器：
使用严格的;angular.module（'app.controller型大学'，['ngCookies']）
.controller（'UniversityCtrl'，['$ stateParams'，'$范围，$窗口'，'大学'，
功能（$ stateParams，$范围，$窗口，大学）{ $ scope.pop（）; }]）;
文件controllers.js。哪里AppCtrl：
使用严格的;/ * *控制器/angular.module（'app.controllers'，['帕斯卡precht.translate'，'ngCookies']）
.controller（'AppCtrl'，['$ rootScope'，'$范围，$翻译，$ localStorage的，$窗口，烤面包机，
功能（$ rootScope，$范围，$翻译，$本地存储，$窗口，烤面包机）{
//添加'即'类为HTML
VAR isIE = !! navigator.userAgent.match（/ MSIE / I）;
isIE＆功放;＆安培; angular.element（$ window.document.body）.addClass（'即'）;
isSmartDevice（$窗口）及＆放大器; angular.element（$ window.document.body）.addClass（'聪明'）; $ scope.toaster = {
类型：'成功'，
标题：标题，
文字：'信息'
};
$ scope.pop =功能（）{
toaster.pop（$ scope.toaster.type，$ scope.toaster.title，$ scope.toaster.text）;
}; }]）
这是我的app.js
使用严格的;
//声明取决于过滤器和服务应用级模块
VAR应用= angular.module（应用，[
ngAnimate'，
ngCookies'，
ngResource'，
ngStorage'，
ui.router'，
ui.bootstrap'，
ui.load'，
ui.jq'，
ui.validate'，
oc.lazyLoad'，
帕斯卡尔precht.translate'，
app.filters'，
app.services'，
app.directives'，
app.controllers'，
app.controller-大学，
UniversityService'，
烤面包机，
]）
。跑（
['$ rootScope'，'$州'，'$ stateParams'，
功能（$ rootScope，$状态，$ stateParams）{
$ rootScope $状态= $状态。
$ rootScope $ stateParams = $ stateParams。
}
]
）
的.config（
['$ stateProvider'，'$ urlRouterProvider'，'$ controllerProvider'，'$ compileProvider'，'$ filterProvider'，'$提供，
功能（$ stateProvider，$ urlRouterProvider，$ controllerProvider，$ compileProvider，$ filterProvider，$提供）{ //懒控制器，指导和服务
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
不然的话（'/应用/仪表板-V1'）;
$ stateProvider
.STATE（'应用'，{
摘要：真实，
网址：'/应用程序'，
templateUrl：TPL / app.html'，
}） .STATE（'app.dashboard-V1'，{
网址：'/仪表板-V1，
templateUrl：TPL / app_dashboard_v1.html
}） /////////////////////////
//大学
//////////////////////////////////////////
.STATE（'app.university'，{
网址：'/ UNIVERSIDADE'，
模板：'＆LT;格UI的视图类=淡入式＆GT;＆LT; / DIV＆GT;'
}）
.STATE（'app.university.list'，{
网址：'/ listar'，
templateUrl：TPL /大学/ list.html'，
控制器：'UniversityCtrl'，
}）
.STATE（'app.university.create'，{
网址：'/ criar'，
templateUrl：TPL /大学/ create.html上'，
控制器：'UniversityCtrl'，
}）
解决方案
您可以使用角烤面包机该参考您的index.html页，并且还添加了CSS，之后，在页面的底部，以下配置指令：
＆LT;烤面包机，多士炉容器选项={
closeButton：假的，
调试：假的，
位置一流：烤面包右上方，
的onclick：空，
'showDuration'：'200'，
hideDuration'：'1000'，
超时：'5000'，
extendedTimeOut'：'1000'，
showEasing'：'摇摆'，
hideEasing'：'直线'，
showMethod：淡入，
hideMethod'：'淡出'
}＆GT;＆LT; /多士炉容器＆GT;
然后将其添加到您的角度模块依赖关系为烤面包机（你已经做得很好），这样以后你就可以到你想要像下面这样的控制器上注入烤面包机服务：
angular.module（'对myApp'）。控制器（'myController的'，[
'$范围，烤面包机，函数（$范围，烤面包机）{ toaster.pop（'成功'，'消息'，'一些信息'）;}]）;
作为文档说，你可以使用多种选项：
toaster.pop（成功，称号，它的地址是https://google.com。'，15000，'trustedHtml'，'goToLink'）;
toaster.pop（成功，称号，'＆LT; UL＆GT;＆LT;李＆GT;渲染HTML＆LT; /李＆GT;＆LT; / UL＆GT;'5000'trustedHtml'）;
toaster.pop（'错误'，称号，'＆LT; UL＆GT;＆LT;李＆GT;渲染HTML＆LT; /李＆GT;＆LT; / UL＆GT;'，NULL，'trustedHtml'）;
toaster.pop（等待，称号，NULL，NULL，'模板'）;
toaster.pop（警告，称号，myTemplate.html，NULL，'模板'）;
toaster.pop（注释，称号，文字）;
所以来看看这个 plunkr
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?
My 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):
<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:
'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
'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',
})
解决方案
you can use angular-toaster reference 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:
<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.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
这篇关于在任何控制器angularjs消防通知烤面包机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
