Angularjs SVG 위젯으로 데이터를 바인드하는 방법

StackOverflow https://stackoverflow.com//questions/10698791

문제

나는 이것이 보통 Angularjs를 사용하는 것이 아니라 내가 원하는 것을 달성하고자하는 것이 Angularjs와 함께 할 수 있다는 것을 알고 있었다. 이것이 권장되는 방식이 아니라면이를 달성하는 방법에 대한 힌트를 제공 할 수 있습니까? 웹 프로그래밍 영역의 새로운 기능을 고려하십시오.

그래서 Project에서 SVG & Raphaeljs를 사용하여 "홀더"Div 내에 배치 된 캔버스에 여러 위젯을 사용합니다. 나는이 위젯을 Angularjs를 사용하여 데이터에 바인딩하려고 노력하고 있습니다. 기본적으로 각 위젯은 CustomController의 객체와 연결됩니다. 위젯을 초기화 할 때 사용자 지정 컨트롤러에 액세스하려면 어떻게해야합니까? 

<html lang="en" style="height: 100%;"  ng-app="myApp">
<head>
  <script type="text/javascript"">
    $(document).ready(function () {
      var canvas = Raphael('holder', '800', '600');
      var widget1 = new Widget1(params);
      // initialize widgets here, that I need to bind to data using AngularJS
      // I am not able to access the CustomController here when drawing my widgets
    });
  </script>
</head>
<body>
  <div id="holder" ng-controller="CustomController">

  </div>
</body>
</html>
.

은 Angularjs를 사용하여 SVG 위젯에서 데이터 바인딩을 달성하기 위해 어쨌든 이에도 있습니다. 나는 이것이 Angularjs의 목적이 아니라고 생각하기 시작했습니다.이 경우이 사건을 당신은 이것을하는 방법에 대해 알려주시겠습니까?

업데이트 :

얘들 아, 당신의 답변을 위해 많은 감사합니다! 이 요구 사항은 위젯이 사용자 입력을 허용하고 HTML 파일 (모듈 형 목적으로)에 배치하지 않으려고합니다. 그래서 지침은 현재의 기본 선택 인 것 같습니다. 링크 방법에서는 RaphaEljs를 사용하여 위젯을 그릴 것입니다. 편집 가능한 객체를 그릴 수도 있지만 Angularjs 바인딩 메커니즘을 제대로 사용하지 않아도됩니다. 그냥 시계와 이벤트 핸들러가 될 것입니다 ... 나에게 지저분한 것처럼 보입니다. 지시문의 템플릿 속성에 SVG 태그를 넣고 템플릿에서 삽입 할 수 있었지만 지원되지 않는 것 같습니다.

당신은 이것에 다른 아이디어를 가지고 있습니까?

BTW는 jQuery로 얻은 속성과 HTML 요소 (예 : 텍스트 상자) 사이에 프로그래밍 방식으로 바인딩을 적용 할 수있는 방법이 있습니까?

에 관해서는

도움이 되었습니까?

해결책

컨트롤러를 보유 할 수 있지만 SVG와 앱을 옆으로 통신하는 전체 의사 소통을 할 수 있습니다.대신 응용 프로그램이 구성되는 방식을 반전하십시오. 앱을 앱을 구동하고 DAN을 사용하여 재사용 가능한 구성 요소로 지시문을 사용하여 SVG를 랩으로하십시오.

btw svg와 angular를 사용하는 것은 그런 희귀 한 것이 아닙니다.이 꽤 굉장한 예를 확인하십시오. http://sullerandras.github.com/svg-siquence-diagram/

다른 팁

이러한 객체를 랩핑하는 Angularjs 지시문을 만드는 것을보아야합니다.각 범위가 변경되는 데이터가 변경되면 범위를 수행해야합니다. $ 적용 ().이것은 단순한 대답이며 http://docs.angularjs.org/guide/directive doc.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top