Menu
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',
})
236
Toastr is a JavaScript library which is used to create a notification popup. Step 1. Create an Angular project. To create a new project, open command prompt and add the following command to create the Toastr project.
AngularJS ng-controller Directive The ng-controller directive adds a controller to your application. In the controller you can write code, and make functions and variables, which will be parts of an object, available inside the current HTML element. In AngularJS this object is called a scope.
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
190
i use the toastr in the following manner:
Include toastr in your index html:
<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);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
