AngularJS works with bootstrap to dynamically load the pop-up prompt content. angularjsbootstrap
Angularjs is a very good web front-end framework developed by the Google team. Under so many web frameworks, angularjs can stand out from the crowd. It is superior in architecture design, two-way data binding, dependency injection, commands, MVC, and templates. Angular. js innovatively integrates background technologies into front-end development to eliminate jQuery's first appearance. Using angularjs is like writing background code, which is more standardized, structured, and controllable.
1. bootstrp pop-up prompt
Bootstrap has encapsulated a very useful pop-up prompt Popover for us.
Http://v3.bootcss.com/javascript/#popovers
2. Custom popover commands
We use a command to add a popover to any element and change the content of the pover as needed.
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>
The above is a small series of angularJS and bootstrap to achieve dynamic loading pop-up content, I hope you like it.