当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > angularJS与bootstrap结合实现动态加载弹出提示内容

angularJS与bootstrap结合实现动态加载弹出提示内容

2018年06月18日  | 移动技术网IT编程  | 我要评论

angularjs是由google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下，angularjs能脱颖而出，从架构设计上就高人一等，双向数据绑定，依赖注入，指令，mvc，模板。angular.js创新地把后台技术融入前端开发，扫去jquery一度的光芒。用angularjs就像写后台代码，更规范，更结构化，更可控。

1.bootstrp的弹出提示

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

　　

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>

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结合实现动态加载弹出提示内容，希望大家喜欢。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网