利用Angular.js編寫公共提示模塊的方法教程
前言
在編寫一些大型工程的時(shí)候，會(huì)經(jīng)常遇到一些公用提示，使用框架自帶很多時(shí)候不方便，于是我手寫了一個(gè)，下面來(lái)看看詳細(xì)的介紹：
效果圖如下
方法如下
一、先在angular中注冊(cè)一個(gè)模塊
二、
注冊(cè)一個(gè)模塊 注入依賴
三、
返回不同的方法應(yīng)對(duì)不同情況
四、
獲取模板路徑
五、
編寫模板內(nèi)容 和普通的頁(yè)面一樣調(diào)用使用angular服務(wù)
六、
1. 開啟http服務(wù)獲取模板內(nèi)容
2. 重點(diǎn)注意 $template = $compile(template)(scope); 這句代碼非常重要 用于激活模板內(nèi)容轉(zhuǎn)成angular能識(shí)別的html代碼片段
3.提示框消失時(shí)間 設(shè)置回調(diào)函數(shù) $template.detach();用于模板消失
七、
設(shè)置html代碼內(nèi)的變量
1.由于不在控制層 $scope對(duì)象無(wú)法獲取不了值 所有需要用代替值 需要在使用時(shí)將$scope傳入
八、使用方法如下
記得在控制器里面注入alertModel模塊
九、使用效果
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家腳本之家的支持。
相關(guān)文章
本篇文章主要介紹了Angular中的生命周期鉤子的理解，詳細(xì)的介紹了生命周期鉤子和主要的生命周期鉤子，有興趣的可以了解一下2017-07-07
當(dāng)Angular項(xiàng)目的規(guī)模到達(dá)一定的程度，就需要進(jìn)行測(cè)試工作了。為什么要自動(dòng)化測(cè)試？1，提高產(chǎn)出質(zhì)量。2，減少重構(gòu)時(shí)的痛。反正我最近重構(gòu)多了，痛苦經(jīng)歷多了。3，便于新人接手。下面這篇文章就給大家詳細(xì)介紹了Angular.Js的自動(dòng)化測(cè)試，有需要的朋友們可以參考借鑒。2016-12-12
深入學(xué)習(xí)JavaScript的AngularJS框架中指令的使用方法
這篇文章主要介紹了深入學(xué)習(xí)JavaScript的AngularJS框架中指令的使用方法,指令的使用是Angular入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2016-03-03
AngularJS學(xué)習(xí)第一篇 AngularJS基礎(chǔ)知識(shí)
這篇文章主要介紹了AngularJS學(xué)習(xí)第一篇，分享了有關(guān)AngularJS的基礎(chǔ)知識(shí)，主要包括指令、過(guò)濾器等，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
AngularJS中的指令實(shí)踐開發(fā)指南(二)
這篇文章主要介紹了AngularJS中的指令實(shí)踐指南(二)的相關(guān)資料,需要的朋友可以參考下2016-03-03
Angular 4依賴注入學(xué)習(xí)教程之組件服務(wù)注入（二）
大家都知道依賴注入式AngularJS的重要特性之一，之前我們已經(jīng)介紹了關(guān)于Angular 4依賴注入基礎(chǔ)的內(nèi)容，下面這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入之組件服務(wù)注入的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-06-06
angular實(shí)現(xiàn)input輸入監(jiān)聽的示例
今天小編就為大家分享一篇angular實(shí)現(xiàn)input輸入監(jiān)聽的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Angular 多模塊項(xiàng)目構(gòu)建過(guò)程
這篇文章主要介紹了Angular 多模塊項(xiàng)目構(gòu)建過(guò)程，本文大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
實(shí)例解析angularjs的filter過(guò)濾器
本文對(duì)angularjs的filter過(guò)濾器進(jìn)行系統(tǒng)介紹，附上實(shí)例解析，便于理解。具有很好的參考價(jià)值，需要的朋友可以看下2016-12-12
AngularJs Using $location詳解及示例代碼
本文主要介紹AngularJs Using $location的知識(shí)資料，這里整理了相關(guān)的資料，及簡(jiǎn)單示例代碼，有興趣的小伙伴可以參考下2016-09-09