亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

mj / 2233人閱讀

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

源碼

Demo

github

前言

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

啥樣

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

功能

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

默認(rèn)提示3秒框自動(dòng)關(guān)閉，或者點(diǎn)擊x號(hào)關(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;
    }
  };
}]);
用法

因?yàn)槭侨痔崾荆跃椭挥幸粋€(gè)，在index.html中添加：

同時(shí)保證他的z-index最高

然后因?yàn)樾枰陧?yè)面上直接訪問(wèn)tipService，需要在最外層controller（如果沒(méi)有可以直接綁定到$rootScope)中綁定:

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

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

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

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

效果

我的效果就是這樣啦~

最后

東西比較少?zèng)]有封裝成ng模塊，基本的需求可以實(shí)現(xiàn)，有機(jī)會(huì)還是要看看人家是怎么做這個(gè)全局提示的，嗯！

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/86103.html

相關(guān)文章

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

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

    Zhuxy 評(píng)論0 收藏0

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

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

    Snailclimb 評(píng)論0 收藏0

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

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

    opengps 評(píng)論0 收藏0

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

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

    zr_hebo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

mj

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<