AngularJS : 모델/콘텐츠에 업데이트를 처리하는 지침을 작성하는 올바른 방법입니까?

json 파일에서로드 될 svg 요소가있는 html 페이지를 만들어야합니다. json 파일은 $ http를 사용하여로드되고 약속을 반환합니다. 나는 다음과 같은 마크 업을 HTML 파일 AngularJS : 모델/콘텐츠에 업데이트를 처리하는 지침을 작성하는 올바른 방법입니까?

<ext-svg content="svg"></ext-svg>

svg 첫 번째 정의가 포함되고 JSON은 유효한 SVG 컨텐츠를로드 할 때.

내 지시어는 다음과 같이 정의된다 :

angular.module('myApp.directives') 
     .directive('extSvg', function() { 
     "use strict"; 

     return { 
      restrict: 'E', 
      scope: { 
      content: '=' 
      }, 
      link: function (scope, element) { 
      scope.$watch('content', function (value) { 
       if (value) { 
       element.replaceWith('<svg>' + scope.content + '</svg>'); 
       } 
      }); 
      } 
     }; 
     });

렌더링 된 페이지는 예컨대 : 그것은 일

<svg><circle cx="10" cy="10" r="10" fill="yellow" stroke="black" stroke-width="1"></circle></svg>

포함하지만이를 구현하는 올바른 방법인가?

출처

2015-01-07 dec

내가 생각 당신의 HTML

<div ng-bind-html="svg"></div>

및 컨트롤러 너무

Look at this fiddle 그것은 *의 REPL에 조금 위험하다 에이스 * 요소 전체. 각은 요소 (범위 및 다른 가능성)에 물건을 바인딩하고, 발 아래에서 카펫을 당길 수 있습니다. 내부 HTML을 더 잘 설정하십시오. –

SVG 내부의 HTML이 작동하지 않는다고 생각합니다. 그런 이유로 나는 그 요소를 대체해야했다. 그러나 당신은 옳습니다.이 접근법에는 문제가 있습니다. 교체는 한 번만 작동합니다 .--( – dec

아마도 ngSanitize 모듈을 사용하여 컨트롤러의 값을 직접 바인드하는 방법과 달리 실제로 ng-bind-html을 사용하기 만하면 SVG를 삽입하고 대체 할 필요가없는 지시문이 필요합니다. 요소

$scope.svg = $sce.trustAsHtml('<svg><circle r="50"/></svg>'); //$sce needs to be injected in your controller

출처

2015-01-07 21:26:01 Strife86

AngularJS : 모델/콘텐츠에 업데이트를 처리하는 지침을 작성하는 올바른 방법입니까?

답변

관련 문제