Combination of angularJS and bootstrap for dynamic loading pop-up prompt content _ AngularJS-js tutorial

This article mainly introduces the content of the pop-up prompt for dynamic loading using angularJS and bootstrap, and the prompt through bootstrp. Interested friends can refer to this article 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', "
Name:-
");        $(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:

app 1app 2

The above is a small series of angularJS and bootstrap to achieve dynamic loading pop-up content, I hope you like it.