Combinaison d'angularJS et de bootstrap pour charger dynamiquement l'invite contextuelle content_AngularJS

angularjs est un excellent framework web front-end développé par l'équipe Google. Avec autant de frameworks Web actuellement disponibles, Angularjs peut se démarquer des autres en termes de conception architecturale, de liaison de données bidirectionnelle, d'injection de dépendances, de directives, de MVC et de modèles. Angular.js intègre de manière innovante la technologie back-end dans le développement front-end, balayant ainsi l'ancienne gloire de jQuery. Utiliser Angularjs, c'est comme écrire du code backend, plus standardisé, plus structuré et plus contrôlable.

Invite contextuelle 1.bootstrp

Bootstrap nous a aidé à encapsuler l'invite contextuelle très utile Popover.

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

2. Commande popover personnalisée

Nous utilisons une commande pour ajouter un popover à n'importe quel élément, et le contenu du popover peut être modifié en fonction de la situation.

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>

Ce qui précède est la combinaison d'angularJS et de bootstrap introduite par l'éditeur pour charger dynamiquement le contenu des invites contextuelles. J'espère que vous l'aimerez.