?將組件封裝起來在項目中開發很實用，之前遭遇過一次痛苦的經歷，那陣子改的要吐血了。常用的組件封裝起來，改公共的地方，往往多處受用。

例如：我在項目中引用 ?tips.text('加載中。。。',false) ；

參數設為false時，tips會一直顯示，可以在請求成功后，讓tips 隱藏了；參數不設置的時候，tips兩秒后消失。

PS：isHide && (timeoutId = setTimeout(function() {ele.style.display = 'none';?}, 2000));?這句困擾了好久，這是tips一直顯示的原因，最后終于明白了，&&方法：當只有前面的為true,后面的才可以執行，并返回后面的值。附上篇覺得寫得不錯的一篇文章：

http://wenrunchang123.iteye.com/blog/1749802?

module.exports = function() {angular.module('App').factory('tips', function() {var $ = angular.element;var ele = angular.element('<div id="tips"></div>')[0];var $ele = $(ele);var style = {display: 'none',padding: '5px 10px','text-align': 'center',position: 'fixed',left: '50%',transform: 'translate(-50%, -50%)','background-color': 'rgba(0,0,0,.6)',color: '#fff','z-index': '9999','border-radius': '5px'};angular.element(ele).css(style);document.body.appendChild(ele);var timeoutId = null;return {text: function(msg, isHide) {isHide = isHide !== undefined ? isHide : true;ele.style.display = 'inline-block';ele.style.bottom = '50%';ele.innerHTML = msg;clearTimeout(timeoutId);isHide && (timeoutId = setTimeout(function() {ele.style.display = 'none';}, 2000));},hide: function() {ele.style.display = 'none';},tips: function(options) {if (options.style) {for (var p in options.style) {ele.style[p] = options.style[p];}}ele.style.display = 'inline-block';ele.innerHTML = options.msg;clearTimeout(timeoutId);(options.isHide || options.isHide === undefined) && (timeoutId = setTimeout(function() {ele.style.display = 'none';}, options.timeout || 2000));}}}); };

?

轉載于:https://www.cnblogs.com/xiaoli52qd/p/6705096.html

總結

以上是生活随笔為你收集整理的angular组件--tips提示功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。