angularJS與bootstrap結(jié)合實(shí)現(xiàn)動(dòng)態(tài)加載彈出提示內(nèi)容
angularjs是由Google團(tuán)隊(duì)開發(fā)的一款非常優(yōu)秀web前端框架。在當(dāng)前如此多的web框架下,angularjs能脫穎而出,從架構(gòu)設(shè)計(jì)上就高人一等,雙向數(shù)據(jù)綁定,依賴注入,指令,MVC,模板。Angular.js創(chuàng)新地把后臺(tái)技術(shù)融入前端開發(fā),掃去jQuery一度的光芒。用angularjs就像寫后臺(tái)代碼,更規(guī)范,更結(jié)構(gòu)化,更可控。
1.bootstrp的彈出提示
bootstrap已經(jīng)幫我們封裝了非常好用的彈出提示Popover。
http://v3.bootcss.com/javascript/#popovers
2.自定義popover指令
我們使用一個(gè)指令給任意元素加上popover,并且可以根據(jù)情況改變popover的content內(nèi)容。
JS:
<script> var app = angular.module('testApp', []); app.factory('dataService',function() { var service = {}; service.cacheObj = {}; service.getAppName = function (appId, callback) { if (service.cacheObj[appId]) { console.log('get name from cache'); callback(service.cacheObj[appId]); return; } //here is sample. Always ajax. service.cacheObj[appId] = 'QQ'; callback('QQ'); }; return service; }); app.directive('myPopover', function (dataService) { return { restrict: 'AE', link: function (scope, ele, attrs) { $(ele).data('title','App'); $(ele).data('content', "<div id ='popDiv'>Name:-</div>"); $(ele).popover({ html: true, trigger: 'hover'}); $(ele).on('shown.bs.popover',function() { var popDiv = $('#popDiv'); console.log(popDiv); dataService.getAppName('xxx',function(name) { popDiv.html('Name:'+name); }); }); } }; }); app.controller("test",function($scope) { }); </script>
html:
<div ng-app="testApp"> <div ng-controller="test"> <div> <a my-popover>app 1</a> <a my-popover>app 2</a> </div> </div> </div>
以上是小編給大家介紹的angularJS與bootstrap結(jié)合實(shí)現(xiàn)動(dòng)態(tài)加載彈出提示內(nèi)容,希望大家喜歡。
相關(guān)文章
如何利用@angular/cli V6.0直接開發(fā)PWA應(yīng)用詳解
這篇文章主要給大家介紹了如何利用@angular/cli V6.0直接開發(fā)PWA應(yīng)用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用@angular/cli V6.0具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2018-05-05AngularJS中$watch和$timeout的使用示例
這篇文章給大家介紹了AngularJS中$watch和$timeout的使用例子,通過示例代碼相信更能讓大家理解,有需要的朋友們下面來一起看看吧。2016-09-09AngularJS通過$location獲取及改變當(dāng)前頁面的URL
本篇將介紹AngularJS中的$location服務(wù)的基本用法,$location服務(wù)的主要作用是用于獲取當(dāng)前url以及改變當(dāng)前的url,并且存入歷史記錄。本文通過示例代碼介紹的很詳細(xì),有需要的朋友們可以參考借鑒,下面來一起看看吧。2016-09-09Angular HMR(熱模塊替換)功能實(shí)現(xiàn)方法
本篇文章主要介紹了Angular HMR(熱模塊替換)功能實(shí)現(xiàn)方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04Angular項(xiàng)目如何升級(jí)至Angular6步驟全紀(jì)錄
這篇文章主要給大家介紹了關(guān)于Angular項(xiàng)目如何升級(jí)至Angular6的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-09-09