AngularJS에서 DOM에 동적으로 svg를 추가하고 조작하고 추가합니다.

Question

.svg 파일이있는 모달 대화 상자를 팝업하는 html 페이지가 있습니다.

정적 컨텐츠 폴더에있는 svg 파일 (현재).

메모리에 svg 파일을로드하고 메모리 편집 중 일부를 수행 한 다음 팝업 페이지에 동적으로 추가하려고합니다.

AngularJS로 어떻게 할 수 있습니까 ({{}} 및 컨트롤러에서 채우기/조작 사용)?

Answer 1

수정 됨. AngularJS UI를 사용하여 모달 대화 상자를 표시하기위한 기본 템플릿이 좋습니다 (모달 섹션 http://angular-ui.github.io/bootstrap 참조).

필자가 작성해야했던 한 가지 수정 사항은 $ scope를 호출하는 것이 었습니다. $ apply 동적으로 삽입 된 html을 표시합니다.

HTML :

<div ng-repeat='process in myProcesses.ProcessInstances.ProcessInstance'> 
    <div class="myprocesses-row-wrapper"> 
     <div class="myprocesses-row"> 
      <div class="myprocesses-process-title">{{process.id}}</div> 
      <div class="myprocesses-process-startedby"> 
       Started by: (dummy) 
       <button class="btn pull-right" ng-click="open(process)">Show diagram</button> 
      </div> 
      <div class="clearfix"></div> 
     </div> 
    </div> 
</div> 

<!--modal dialog to show the svg --> 
<div modal="shouldBeOpen" close="close()" options="opts"> 
    <div class="modal-header"> 
     <h3>Process diagram</h3> 
    </div> 
    <div class="modal-body"> 
     <div compile="svgData"></div> <!--custom compile directive, to inject html directly--> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-warning cancel" ng-click="close()">Close</button> 
    </div> 
</div> 

그리고 JS :

'use strict'; 

    app.controller('MyProcessesController', 
     function MyProcessesController($scope, $rootScope, $log, myService) { 
      $rootScope.contentTitle = "My processes"; 
      $scope.myProcesses = myService.getMyProcesses(); 

      $scope.open = function (process) { 
       //TODO: temp hack to load the svg, because current service does not give us the svg yet 
       $('<div>').load("/Content/svg/svgexample.svg", function (data) { 
        $scope.svgData = data; 
        $scope.shouldBeOpen = true; 
        $scope.$apply(); // this is neccessary to show the dialog immediately 
       }); 
      }; 

      $scope.close = function() { 
       $scope.shouldBeOpen = false; 
      }; 

      $scope.opts = { 
       backdropFade: true, 
       dialogFade: true 
      }; 
     });