国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

AngularJs中實現(xiàn)全局提示框

mj / 2149人閱讀

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

源碼

Demo

github

前言

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

啥樣

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

功能

可以設(shè)置message和type，type就是bs內(nèi)置的幾種顏色

默認(rèn)提示3秒框自動關(guān)閉，或者點擊x號關(guān)閉

代碼 模板 

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

    }
  };
}]);
服務(wù) 
/**
 * 提示框數(shù)據(jù)
 */
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)中綁定:

//提示信息服務(wù)
$scope.tipService = TipService;

調(diào)用的時候在c中直接設(shè)置message和type就可以了

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

當(dāng)然從上面的模板代碼可以看到，如果不傳第二個參數(shù)，type默認(rèn)是info，也就是那個藍色的

效果

我的效果就是這樣啦~

最后

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/86103.html

相關(guān)文章

  • [譯] 通過 Webpack 實現(xiàn) AngularJS 的延遲加載

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

    Zhuxy 評論0 收藏0

  • 利用angular4和nodejs-express構(gòu)建一個簡單的網(wǎng)站（九）—用戶登錄

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

    Snailclimb 評論0 收藏0

  • 利用angular4和nodejs-express構(gòu)建一個簡單的網(wǎng)站（九）—用戶登錄

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

    opengps 評論0 收藏0

  • 【譯】《精通使用AngularJS開發(fā)Web App》（四）--- 深入視圖，模板系統(tǒng)，模塊和依賴注

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

    zr_hebo 評論0 收藏0

發(fā)表評論

0條評論

mj

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<