Menggabungkan angularJS dan bootstrap untuk memuatkan kandungan gesaan pop timbul secara dinamik_AngularJS

angularjs ialah rangka kerja bahagian hadapan web yang sangat baik yang dibangunkan oleh pasukan Google. Dengan begitu banyak rangka kerja web yang tersedia pada masa ini, angularjs boleh menonjol daripada yang lain dari segi reka bentuk seni bina, pengikatan data dua hala, suntikan kebergantungan, arahan, MVC dan templat. Angular.js secara inovatif menyepadukan teknologi bahagian belakang ke dalam pembangunan bahagian hadapan, menghapuskan kegemilangan bekas jQuery. Menggunakan angularjs adalah seperti menulis kod hujung belakang, lebih piawai, lebih berstruktur dan lebih terkawal.

1.bootstrp pop timbul gesaan

Bootstrap telah membantu kami merangkum Popover gesaan pop timbul yang sangat berguna.

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

2. Perintah popover tersuai

Kami menggunakan arahan untuk menambah popover pada mana-mana elemen, dan kandungan popover boleh diubah mengikut situasi.

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>

Di atas ialah gabungan angularJS dan bootstrap yang diperkenalkan oleh editor untuk memuatkan kandungan segera pop timbul secara dinamik. Saya harap anda menyukainya.