angularJS とブートストラップを組み合わせてポップアップ プロンプト content_AngularJS を動的にロードする

angularjs は、Google チームによって開発された優れた Web フロントエンド フレームワークです。現在、非常に多くの Web フレームワークが利用可能ですが、angularjs は、アーキテクチャ設計、双方向データ バインディング、依存関係注入、ディレクティブ、MVC、テンプレートの点で他のフレームワークよりも優れています。 Angular.js はバックエンド テクノロジーをフロントエンド開発に革新的に統合し、jQuery のかつての栄光を一掃します。 angularjs の使用は、より標準化され、より構造化され、より制御しやすいバックエンド コードを作成するのと似ています。

1.bootstrp ポップアップ プロンプト

Bootstrap は、非常に便利なポップアップ プロンプト Popover をカプセル化するのに役立ちました。

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

2. カスタム ポップオーバー コマンド

コマンドを使用して任意の要素にポップオーバーを追加し、状況に応じてポップオーバーの内容を変更できます。

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 とブートストラップの組み合わせです。気に入っていただければ幸いです。