Feuer Benachrichtigung Toaster in jedem Controller angularjs

Ich benutze diesen Service für Benachrichtigungen: https://github.com/jirikavi/AngularJS-Toaster
Funktioniert perfekt. Ich konfiguriere das bereits überall in meiner Anwendung und erstelle einen Pop() Button, indem ich auf den Auslöser Benachrichtigung Toaster klicke.
Was ich jetzt brauche, ist jeder Controller in meiner Anwendung, der die Benachrichtigungsmethode auslösen kann.
Zum Beispiel, im Controller ProductController, ich rufe pop() zu jeder Zeit und dann würde die Benachrichtigung ausgelöst werden.
Trotz jeder Ansicht funktioniert die pop() - Methode innerhalb des Controllers überhaupt nicht.
Gibt es ein Detail, das ich nicht beobachte?Feuer Benachrichtigung Toaster in jedem Controller angularjs

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

Meine Ansicht, wenn die Benachrichtigung Toaster ist Feuer durch Klick 'pop()' (es funktioniert perfekt):

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

Mein Controller:

'use strict'; 

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

     $scope.pop();  

    }]);

Die Datei controllers.js. Wo ist der 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); 
     }; 

    }])

Das ist mein 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',    
      })

Quelle

2014-10-10 Rafael Soufraz

Wo ist 'AppCtrl' ist es das übergeordnete Produkt-Abfrage? hast du auch noch css? – PSL

Können Sie mehr Code anzeigen? Der Rest der App? Das relevante HTML? Die relevante CSS? – JME

Warum nicht den Code bewegen, um den Toaster in einem separaten Dienst zu öffnen, den Aufruf zu parametrisieren und dann einen beliebigen Controller zu verwenden ... –

Sie angular-toaster Referenz es auf Ihre Seite index.html verwenden können und auch noch die CSS, nach, dass die Richtlinie bei der Konfiguration unten auf der Seite wie folgt:

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

fügen Sie dann zu Ihrer Winkelmodulabhängigkeit als ‚Toaster‘ (Sie es schon taten gut) so nach, dass Sie in der Lage sein, t zu injizieren oaster Dienst auf jedem Controller möchten Sie wie folgt vor:

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

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

}]);

wie die Dokumentation sagt, dass Sie eine Vielzahl von Optionen zur Verfügung:

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

nehmen so einen Blick auf dieses plunkr

Quelle

2014-10-16 21:31:21

Der Toaster-Container ist in index.html? :/ –

Danke !! Es funktioniert perfekt! –

Ja, schadet Ihnen nicht, Sie können es in Ihrer gesamten Anwendung verwenden, das ist der einfachste Weg, es einzurichten und ziemlich gerade fwd –

i die toastr auf folgende Weise verwenden:

In Ihrem Index html toastr:

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

Definieren Sie eine Fabrik, die Sie in einen beliebigen Controller einspeisen können:

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

Danach können Sie dieses Modul in jedem Controller injizieren:

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

Quelle

2014-10-14 22:44:07 AndreiC

Das ist großartig. Es scheint zunächst ein Overkill zu sein, da Sie nur Toaster-Methoden in einem anderen Service anrufen, aber es hat einen großen Wert: Wenn Sie jemals Toaster für eine andere Bibliothek fallen lassen müssen, müssen Sie nicht jeden einzelnen Ort verfolgen hätte Toaster direkt angerufen. +1 darauf. –

Ich mag @AndreiC 's Antwort.Ein Jahr später, hier ist ein robuster Fabrik Service, den ich verwenden:

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

auf dem $resource Versprechen

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

Quelle

2016-02-23 06:10:56 Fergus

Feuer Benachrichtigung Toaster in jedem Controller angularjs

Antwort

Verwandte Themen