任何控制器 angularjs 中的火灾通知烤面包机 [英] Fire notification toaster in any controller angularjs

查看：27
本文介绍了任何控制器 angularjs 中的火灾通知烤面包机的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用此服务接收通知:https://github.com/jirikavi/AngularJS-Toaster
工作正常.已经在我的应用程序中的任何地方为此进行了配置，我创建了一个 pop () 按钮，单击触发器通知烤面包机.
我现在需要的是我的应用程序中的任何控制器，可以调用触发通知方法.
比如在控制器ProductController中，我随时调用pop()，就会触发通知.
尽管有任何视图，控制器中的 pop() 方法函数根本不起作用.
有什么细节我没看吗?

我的 index.html

<html lang="en" data-ng-app="app"><头><meta charset="utf-8"/><title>我的应用</title><meta name="description" content="应用程序、Web 应用程序、响应式、响应式布局、管理、管理面板、管理仪表板、平面、平面 ui、ui 套件、AngularJS、ui 路由、图表、小部件、组件"/><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"/><body ng-controller="AppCtrl"><div class="app" id="app" ng-class="{'app-header-fixed':app.settings.headerFixed, 'app-aside-fixed':app.settings.asideFixed, 'app-一边折叠':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><!-- 角度--><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><!-- 应用程序--><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><!-- 延迟加载--></html>

我通过单击pop()"触发通知烤面包机时的视图(效果很好):

<h1 class="m-n font-thin h3">大学</h1>
<div class="wrapper-md"><!-- 烤面包机指令--><toaster-container toaster-options="{'position-class': 'toast-top-right', 'close-button':true}"></toaster-container><!--/烤面包机指令--><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">创建</span>

<div class="panel-body"><div class="form-group pull-in clearfix"><div class="col-sm-6"><label>名称</label><input type="text" name="name" class="form-control" maxlength="40" ng-model="university.name" required >

</div><!--./form-group-->

<footer class="panel-footer text-right bg-light lter"><button type="submit" class="btn btn-success">保存</button><button class="btn btn-success" ng-click="pop()">pop()</button></页脚>

</表单>

我的控制器:

'use strict';angular.module('app.controller-university', ['ngCookies']).controller('UniversityCtrl', ['$stateParams', '$scope', '$window', 'University',函数($stateParams，$scope，$window，大学){$scope.pop();}]);

文件controller.js.AppCtrl 在哪里:

'use strict';/* 控制器 */angular.module('app.controllers', ['pascalprecht.translate', 'ngCookies']).controller('AppCtrl', ['$rootScope', '$scope', '$translate', '$localStorage', '$window', 'toaster',函数($rootScope，$scope，$translate，$localStorage，$window，toaster){//将 'ie' 类添加到 htmlvar 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 = {类型:'成功'，title: '标题',文本:'消息'};$scope.pop = function(){toaster.pop($scope.toaster.type, $scope.toaster.title, $scope.toaster.text);};}])

这是我的 app.js

'use strict';//声明依赖过滤器和服务的应用级模块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-大学','大学服务','烤面包机'，]).跑([ '$rootScope', '$state', '$stateParams',函数($rootScope，$state，$stateParams){$rootScope.$state = $state;$rootScope.$stateParams = $stateParams;}]).config([ '$stateProvider', '$urlRouterProvider', '$controllerProvider', '$compileProvider', '$filterProvider', '$provide',函数 ($stateProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {//惰性控制器、指令和服务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('应用程序', {摘要:真实，网址:'/应用'，templateUrl: 'tpl/app.html',}).state('app.dashboard-v1', {url: '/dashboard-v1',templateUrl: 'tpl/app_dashboard_v1.html'})///////////////////////////大学/////////////////////////////////////////.state('app.university', {网址:'/大学'，模板:'<div ui-view class="fade-in-up"></div>'}).state('app.university.list', {网址: '/listar',templateUrl: 'tpl/university/list.html',控制器:'大学Ctrl'，}).state('app.university.create', {网址:'/criar'，templateUrl: 'tpl/university/create.html',控制器:'大学Ctrl'，})

解决方案

你可以使用 angular-toaster 引用它您的 index.html 页面并添加 css，然后将页面底部的指令配置如下:

然后将它添加到您的 angular 模块依赖项中作为烤面包机"(您已经做得很好)，这样之后您就可以在您想要的任何控制器上注入烤面包机服务，如下所示:

angular.module('myApp').controller('myController', ['$scope', 'toaster', function($scope,toaster) {toaster.pop('success', 'message', 'some message');}]);

正如文档所说，您可以使用多种选项:

toaster.pop('success', "title", '它的地址是 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('警告', "title", "myTemplate.html", null, 'template');toaster.pop('note', "title", "text");

所以看看这个 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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆