Toaster powiadomień pożarowych w dowolnym kontrolerze angularjs

Używam tej usługi do powiadomień: https://github.com/jirikavi/AngularJS-Toaster
Działa doskonale. Już skonfigurowane do tego w dowolnym miejscu w mojej aplikacji tworzę przycisk pop(), klikając toaster powiadomienia o wyzwalaczu.
Potrzebuję teraz dowolnego kontrolera w mojej aplikacji, mogę wywołać wyzwalanie metody powiadamiania.
Na przykład w kontroler ProductController, w dowolnym momencie wywołać pop(), a następnie powiadomienie zostanie uruchomiony.
Pomimo dowolnego widoku funkcja metody pop() w kontrolerze nie działa w ogóle.
Czy jest jakiś szczegół, którego nie oglądam?Toaster powiadomień pożarowych w dowolnym kontrolerze angularjs

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

Moim zdaniem, gdy zgłoszenie jest toster ogień przez kliknięcie 'pop()' (działa idealnie):

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

Mój kontroler:

'use strict'; 

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

     $scope.pop();  

    }]);

Plik controllers.js. Gdzie jest 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); 
     }; 

    }])

To jest moje 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',    
      })

Źródło

2014-10-10 Rafael Soufraz

Gdzie jest 'AppCtrl' jest rodzicem ctrl produkt? czy masz również niezbędne css? – PSL

Czy możesz pokazać więcej kodu? Reszta aplikacji? Odpowiedni HTML? Odpowiedni CSS? – JME

Dlaczego nie przenieść kodu, aby otworzyć toster w oddzielnej usłudze, sparametryzuj wywołanie, a następnie użyj dowolnego kontrolera, który chcesz ... –

można wykorzystać angular-toaster odniesienie go do swojej strony index.html, a także dodać css, po czym skonfigurować dyrektywy w życie u dołu strony jak:

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

następnie dodać go do swoich kanciastych zależności modułu jako „toster” (już to zrobił dobrze), więc po tym będzie można wstrzyknąć t Usługa oaster na dowolnym kontrolerze chcesz tak:

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

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

}]);

jako dokumentacja mówi, można skorzystać z różnorodnych opcji:

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

więc spojrzeć na to plunkr

Źródło

2014-10-16 21:31:21

Pojemnik tostera znajduje się w pliku index.html? :/ –

Dzięki! Działa doskonale! –

tak, nic w tym złego, będziesz mógł go używać w całej aplikacji, to jest łatwiejszy sposób konfiguracji i całkiem prosty fwd –

używam toastr w następujący sposób:

Dołącz toastr w html index:

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

Zdefiniuj fabrykę, którą możesz wstrzyknąć w dowolnym kontrolerze:

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

Po tym można wstrzyknąć tego modułu w dowolnym kontrolerze:

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

Źródło

2014-10-14 22:44:07 AndreiC

To świetnie. Z początku wydaje się to przesadzone, ponieważ po prostu wywołujecie metody tostera w innej usłudze, ale ma to wielką wartość: jeśli kiedykolwiek musicie opuścić toaster na inną bibliotekę w przyszłości, nie będziecie musieli ścigać każdego miejsca, nazwałbym toster bezpośrednio. +1 na to. –

lubię @AndreiC - odpowiedź.Rok później, tutaj jest bardziej solidna obsługa fabryka używam:

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

na $resource obietnicy

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

Źródło

2016-02-23 06:10:56 Fergus

Toaster powiadomień pożarowych w dowolnym kontrolerze angularjs

Odpowiedz

Powiązane problemy