Tostapane antincendio in qualsiasi controller angularjs

Sto utilizzando questo servizio per le notifiche: https://github.com/jirikavi/AngularJS-Toaster
Funziona perfettamente. Già configurato per questo ovunque nella mia applicazione, creo un pulsante pop(), facendo clic sul tostapane di notifica trigger.
Ciò di cui ho bisogno ora è qualsiasi controller nella mia applicazione, può chiamare l'attivazione del metodo di notifica.
Ad esempio, all'interno del controller ProductController, chiamo pop() in qualsiasi momento e quindi la notifica verrebbe attivata.
Nonostante qualsiasi visualizzazione, la funzione del metodo pop() all'interno del controller non funziona affatto.
C'è qualche dettaglio che non sto guardando?Tostapane antincendio in qualsiasi controller angularjs

mio 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>

mio punto di vista, quando il tostapane di notifica è il fuoco con un clic 'pop()' (funziona perfettamente):

<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>

mio regolatore:

'use strict'; 

angular.module('app.controller-university', ['ngCookies']) 
    .controller('UniversityCtrl', ['$stateParams', '$scope', '$window', 'University', 
    function($stateParams, $scope, $window, University) { 

     $scope.pop();  

    }]);

Il file controller.js. Dov'è l'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); 
     }; 

    }])

Questo è il mio 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',    
      })

fonte

2014-10-10 Rafael Soufraz

dove è 'AppCtrl' è il genitore di ctrl prodotto? hai anche css necessario? – PSL

Puoi mostrare altro codice? Il resto dell'app? L'HTML pertinente? Il CSS pertinente? – JME

Perché non spostare il codice per aprire il tostapane in un servizio separato, parametrizzare l'invocazione e quindi usarlo come controller desiderato ... –

è possibile utilizzare angular-toaster riferimento alla tua pagina index.html e anche aggiungere il CSS, dopo che configurano la direttiva al in fondo alla pagina, come il seguente:

<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>

poi aggiungerlo ai tuoi dipendenze dei moduli angolari come 'toaster' (avete già fatto bene) così dopo che sarete in grado di iniettare t servizio oaster in qualsiasi controller che si desidera come il seguente:

angular.module('myApp').controller('myController', [ 
    '$scope', 'toaster', function($scope,toaster) { 

    toaster.pop('success', 'message', 'some message'); 

}]);

la documentazione dice che si può utilizzare una vasta gamma di opzioni:

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");

quindi un'occhiata a questo plunkr

fonte

2014-10-16 21:31:21

Il contenitore del tostapane è in index.html? :/ –

Grazie !! Funziona perfettamente! –

sì, non c'è niente di male su questo, sarete in grado di usarlo su tutta la vostra applicazione, questo è il modo più semplice per configurarlo e abbastanza semplice. Fwd –

uso il toastr nel seguente modo:

Includi toastr nell'indice html:

<script type="text/javascript" src="/vendor/toastr/toastr.min.js"></script>

Definire una fabbrica che è possibile iniettare in qualsiasi 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); 
     } 
    } 
});

Dopo di che si può iniettare questo modulo in qualsiasi controllore:

angular.module('app').controller('myCtrl',function($scope, ngNotifier) { 
    ngNotifier.notifyError($scope.validationError); 
});

fonte

2014-10-14 22:44:07 AndreiC

È grandioso. In un primo momento sembra eccessivo, dato che stai solo chiamando i metodi di tostapane all'interno di un altro servizio, ma ha un grande valore: se hai mai bisogno di eliminare il tostapane per un'altra libreria in futuro, non dovrai inseguire ogni singolo posto. avremmo chiamato tostapane direttamente. +1 su questo. –

Mi piace @AndreiC risposta.Un anno dopo, qui è un servizio di fabbrica più robusto che uso:

.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'); 
     } 
    }; 
})

sul $resource promessa

.$promise.then(function() { 
    notifierService.notify('email server'); 
});

fonte

2016-02-23 06:10:56 Fergus

Tostapane antincendio in qualsiasi controller angularjs

risposta

Problemi correlati