AngularJs中實現全局提示框

mj 發布于2019-08-21 10:44 / 2161人閱讀

摘要：源碼前言想給項目中添加一個全局提示，發現這本書里剛好有這個例子用開發下一代應用，就直接拿來用了，下面把代碼簡單總結一下，同時也發現和上的全局提示效果也類似，以后研究一下看有什么不同也總結到這里咯啥樣就直接用的警告框啦，功能可以設置和，就是內

源碼

Demo

github

前言

想給項目中添加一個全局提示，發現這本書里剛好有這個例子：《用angularjs開發下一代web應用》，就直接拿來用了，下面把代碼簡單總結一下，同時也發現coding.net和worktile上的全局提示效果也類似，以后研究一下看有什么不同也總結到這里咯

啥樣

就直接用bs的警告框啦~，Duang~

功能

可以設置message和type，type就是bs內置的幾種顏色

默認提示3秒框自動關閉，或者點擊x號關閉

代碼模板


    
    {{message}}

指令

/**
 * 提示框
 */
commonToolDirectives.directive("alertBar",[function(){

  return {
    restrict: "EA",
    templateUrl: "src/common/views/alertBar.html",
    scope : {
      message : "=",
      type : "="
    },
    link: function(scope, element, attrs){

      scope.hideAlert = function() {
        scope.message = null;
        scope.type = null;
      };

    }
  };
}]);

服務

/**
 * 提示框數據
 */
commonServices.factory("TipService", ["$timeout", function($timeout) {
  return {
    message : null,
    type : null,
    setMessage : function(msg,type){

      this.message = msg;
      this.type = type;

      //提示框顯示最多3秒消失
      var _self = this;
      $timeout(function(){
        _self.clear();
      },3000);
    },
    clear : function(){
      this.message = null;
      this.type = null;
    }
  };
}]);

用法

因為是全局提示，所以就只有一個，在index.html中添加：

同時保證他的z-index最高

然后因為需要在頁面上直接訪問tipService，需要在最外層controller（如果沒有可以直接綁定到$rootScope)中綁定:

//提示信息服務
$scope.tipService = TipService;

調用的時候在c中直接設置message和type就可以了

TipService.setMessage("登錄成功", "success");

當然從上面的模板代碼可以看到，如果不傳第二個參數，type默認是info，也就是那個藍色的

效果

我的效果就是這樣啦~

最后

東西比較少沒有封裝成ng模塊，基本的需求可以實現，有機會還是要看看人家是怎么做這個全局提示的，嗯！

GPU云服務器云服務器中實現單點登錄 asp中實現登錄 asp中實現文件 java中實現線程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/86103.html

[譯] 通過 Webpack 實現 AngularJS 的延遲加載

摘要：雖然這些東西都是非常棒的，但是它們都不是實現延遲加載所必需的東西。我們通過的配置對象中的屬性就可以實現延遲加載。單元測試的技巧把改成是全局依賴并不意味著你應該從控制器中刪除它。因為在單元測試中，你只會加載這一個控制器而非整個應用模塊。原文鏈接：http://michalzalecki.com/lazy-load-angularjs-with-webpack/ 隨著你的單頁應用擴大，...

Zhuxy 2019-08-19 17:42 評論0 收藏0
利用angular4和nodejs-express構建一個簡單的網站（九）—用戶登錄

摘要：好了，廢話少說，繼續吧這一章主要講利用控制用戶登錄。在前面的用戶注冊表單中使用了的響應式表單。在構造函數中聲明了一個對象一個對象和對象對象。并在構造函數中用的方法更新了網頁的標題。接下來導航到下一個頁面，并提示用戶登錄成功。最近工作比較忙，一直沒有更新文章。原來看別人的文章感覺很過癮，現在自己寫才發現，要堅持下去真的很難。好了，廢話少說，繼續吧！這一章主要講利用angularJs控制...

Snailclimb 2019-08-30 14:21 評論0 收藏0
利用angular4和nodejs-express構建一個簡單的網站（九）—用戶登錄

摘要：好了，廢話少說，繼續吧這一章主要講利用控制用戶登錄。在前面的用戶注冊表單中使用了的響應式表單。在構造函數中聲明了一個對象一個對象和對象對象。并在構造函數中用的方法更新了網頁的標題。接下來導航到下一個頁面，并提示用戶登錄成功。最近工作比較忙，一直沒有更新文章。原來看別人的文章感覺很過癮，現在自己寫才發現，要堅持下去真的很難。好了，廢話少說，繼續吧！這一章主要講利用angularJs控制...

opengps 2019-08-22 15:57 評論0 收藏0
【譯】《精通使用AngularJS開發Web App》（四）--- 深入視圖，模板系統，模塊和依賴注

摘要：模塊和依賴注入細心的讀者可能已經發現了，到目前為止所用到的例子都是使用的全局的構造函數來定義控制器的。這非常的簡單，只需使用如下參數來調用即可控制器的名字字符串類型控制器的構造函數全局定義的控制器構造函數只適用于快速示例和原型開發。上一篇：【譯】《精通使用AngularJS開發Web App》（三）下一篇：書名：Mastering Web Application Develop...

zr_hebo 2019-08-19 14:29 評論0 收藏0