你的位置:首页 > 软件开发 > Java > angularJS配合bootstrap动态加载弹出提示内容

angularJS配合bootstrap动态加载弹出提示内容

发布时间:2015-10-16 02:00:04
1.bootstrp的弹出提示  bootstrap已经帮我们封装了非常好用的弹出提示Popover。  http://v3.bootcss.com/javascript/#popovers2.自定义popover指令  我们使用一个指令给任意元素加上popover,并且可以根据 ...

1.bootstrp的弹出提示

  bootstrap已经帮我们封装了非常好用的弹出提示Popover。

  http://v3.bootcss.com/javascript/#popovers

2.自定义popover指令

  我们使用一个指令给任意元素加上popover,并且可以根据情况改变popover的content内容。

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>

原标题:angularJS配合bootstrap动态加载弹出提示内容

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。