DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> angularJS與bootstrap結合實現動態加載彈出提示內容
angularJS與bootstrap結合實現動態加載彈出提示內容
編輯:關於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結合實現動態加載彈出提示內容,希望大家喜歡。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved