팝업 프롬프트를 동적으로 로드하기 위해angularJS와 부트스트랩을 결합

angularjs는 Google 팀이 개발한 뛰어난 웹 프런트엔드 프레임워크입니다. 현재 사용할 수 있는 웹 프레임워크가 너무 많기 때문에 Anglejs는 아키텍처 설계, 양방향 데이터 바인딩, 종속성 주입, 지시문, MVC 및 템플릿 측면에서 나머지 프레임워크보다 돋보일 수 있습니다. Angular.js는 백엔드 기술을 프런트엔드 개발에 혁신적으로 통합하여 jQuery의 이전 영광을 휩쓸었습니다. Anglejs를 사용하는 것은 백엔드 코드를 작성하는 것과 같으며, 더 표준화되고, 구조화되고, 제어하기 쉽습니다.

1.bootsrp 팝업 프롬프트

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>

위 내용은 팝업 프롬프트 콘텐츠를 동적으로 로드하기 위해 편집기에서 도입한 각도JS와 부트스트랩의 조합입니다.