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

前端技术 2023/09/06 JavaScript

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

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>

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

本文地址：https://www.stayed.cn/item/17314

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案