Angular는 여러 요소에 동적으로 ng-click 추가

Vasseurth

많은 직사각형 (예 :)이있는 SVG 개체가있는 Ionic 응용 프로그램이 <rect class="info" id="1001" width="20" height="20" transform="translate(40,40)" />있습니다. ng-click각각에 수동으로 추가하지 않고 각각에 지시문 을 추가하고 싶습니다 ng-click.

현재 대신 컨트롤러에 다음 코드가 있습니다.

$(document).ready(function() {
    $('#svg').on('click', 'rect.info', dispInfo);
}

이것은 필요에 따라 작동하지만 "Angular"방식은 아닌 것 같습니다. 이 작업을 수행하는 더 좋은 방법이 있습니까?

나는 더 각진 것처럼 보이지만 소용이없는 다음을 시도했습니다.

var elems = $('#svg rect.info');
elems.attr('ng-click', 'dispInfo()');
$compile(elems);

이렇게하면 ng-click 지시문이 적절한 요소에 성공적으로 추가되지만 실행되지는 않습니다. 내가 전화하는 방식에 문제가 될 수 $compile있습니까?

무투 칸난 칸 니아 판

좀 더 각도를 맞추기 위해 왜 svg 직사각형을 지시문 으로 감싸고 지시문 템플릿의 일부로 ng-click을 추가 할 수 없습니까?

코드에서 내가 보는 문제는 $ compile 함수가 html 템플릿을 허용한다는 것입니다. 아래를 시도해 볼 수 있습니다.

var elems = $('#svg rect.info'),
    $parent = elems.parent();

elems.attr('ng-click', 'dispInfo()');
elems = $compile(elems.html())($scope); // pass your scope variable instead of $scope
$parent.empty().append(elems);

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

md-list-item에서 ng-click으로 여러 요소

분류에서Dev

ng-click을 스팬에 동적으로 추가하는 방법은 무엇입니까?

분류에서Dev

resolveComponentFactory에 동적 이름을 추가하여 Angular 구성 요소를 동적으로 만드는 방법

분류에서Dev

ng-click을 사용하여 양식에 요소를 추가하는 방법은 무엇입니까?

분류에서Dev

Angular의 요소에 동적으로 지시문 추가

분류에서Dev

동적으로 추가 된 범위 요소에 이벤트 핸들러 추가

분류에서Dev

Razor / MVC 5를 사용하여 드롭 다운 목록에 요소를 동적으로 추가하는 방법

분류에서Dev

JS 또는 Jquery를 사용하여 동적으로 생성 된 요소에 이벤트 추가

분류에서Dev

EXTJS는 tpl을 사용하여 동적으로 생성 된 요소에 fireEvent를 추가합니다.

분류에서Dev

사전에 여러 요소를 값으로 추가하는 방법

분류에서Dev

Groovy에서 XML MarkupBuilder를 사용하여 여러 XML 요소 / 컨테이너를 동적으로 추가

분류에서Dev

li 요소에 자동으로 추가하는 jQuery 플러그인?

분류에서Dev

ReactJS는 여러 입력 필드를 동적으로 추가

분류에서Dev

여러 RelativeLayout.LayoutParams를 사용하여 레이아웃에 동적으로 추가하는 방법

분류에서Dev

ng-click이 angular js의 http.get 호출에서 가져온 동적으로 삽입 된 html에 대해 작동하지 않습니다.

분류에서Dev

특정 클래스에 ng-click시 dom 요소 추가

분류에서Dev

단일 페이지에 여러 Cgridview를 동적으로 추가

분류에서Dev

ListView 행에 동적으로 여러보기 추가

분류에서Dev

입력에서 여러 이미지를 동적으로 추가

분류에서Dev

뷰에 여러 줄 레이블을 동적으로 추가

분류에서Dev

테이블 행에 동적으로 추가 된 여러 요소 정렬 및 서식 지정

분류에서Dev

jqBootstrapValidation 플러그인을 사용하여 요소에 동적으로 유효성 검사 추가

분류에서Dev

동적으로 추가 된 요소에 대한 플러그인 초기화

분류에서Dev

여러 줄에 동적 번호가있는 여러 범위 요소로 부트 스트랩 열 채우기

분류에서Dev

json 파일에서 html로 여러 요소를 추가하는 방법

분류에서Dev

angularJS에 새로운 ng-model을 동적으로 추가

분류에서Dev

ng-click이 입력 요소에서 잘 작동하는 동안 ng-focus 및 ng-blur가 작동하지 않음

분류에서Dev

작동하지 않는 jQuery를 사용하여 HTML 요소를 동적으로 추가

분류에서Dev

Angular : templateUrl을 통해로드 된 템플릿에 ng-hide를 어떻게 동적으로 추가합니까?

Related 관련 기사

  1. 1

    md-list-item에서 ng-click으로 여러 요소

  2. 2

    ng-click을 스팬에 동적으로 추가하는 방법은 무엇입니까?

  3. 3

    resolveComponentFactory에 동적 이름을 추가하여 Angular 구성 요소를 동적으로 만드는 방법

  4. 4

    ng-click을 사용하여 양식에 요소를 추가하는 방법은 무엇입니까?

  5. 5

    Angular의 요소에 동적으로 지시문 추가

  6. 6

    동적으로 추가 된 범위 요소에 이벤트 핸들러 추가

  7. 7

    Razor / MVC 5를 사용하여 드롭 다운 목록에 요소를 동적으로 추가하는 방법

  8. 8

    JS 또는 Jquery를 사용하여 동적으로 생성 된 요소에 이벤트 추가

  9. 9

    EXTJS는 tpl을 사용하여 동적으로 생성 된 요소에 fireEvent를 추가합니다.

  10. 10

    사전에 여러 요소를 값으로 추가하는 방법

  11. 11

    Groovy에서 XML MarkupBuilder를 사용하여 여러 XML 요소 / 컨테이너를 동적으로 추가

  12. 12

    li 요소에 자동으로 추가하는 jQuery 플러그인?

  13. 13

    ReactJS는 여러 입력 필드를 동적으로 추가

  14. 14

    여러 RelativeLayout.LayoutParams를 사용하여 레이아웃에 동적으로 추가하는 방법

  15. 15

    ng-click이 angular js의 http.get 호출에서 가져온 동적으로 삽입 된 html에 대해 작동하지 않습니다.

  16. 16

    특정 클래스에 ng-click시 dom 요소 추가

  17. 17

    단일 페이지에 여러 Cgridview를 동적으로 추가

  18. 18

    ListView 행에 동적으로 여러보기 추가

  19. 19

    입력에서 여러 이미지를 동적으로 추가

  20. 20

    뷰에 여러 줄 레이블을 동적으로 추가

  21. 21

    테이블 행에 동적으로 추가 된 여러 요소 정렬 및 서식 지정

  22. 22

    jqBootstrapValidation 플러그인을 사용하여 요소에 동적으로 유효성 검사 추가

  23. 23

    동적으로 추가 된 요소에 대한 플러그인 초기화

  24. 24

    여러 줄에 동적 번호가있는 여러 범위 요소로 부트 스트랩 열 채우기

  25. 25

    json 파일에서 html로 여러 요소를 추가하는 방법

  26. 26

    angularJS에 새로운 ng-model을 동적으로 추가

  27. 27

    ng-click이 입력 요소에서 잘 작동하는 동안 ng-focus 및 ng-blur가 작동하지 않음

  28. 28

    작동하지 않는 jQuery를 사용하여 HTML 요소를 동적으로 추가

  29. 29

    Angular : templateUrl을 통해로드 된 템플릿에 ng-hide를 어떻게 동적으로 추가합니까?

뜨겁다태그

보관