2013-08-21 3 views
3

, 난의 contentEditable 필드의 텍스트에 링크를 삽입 :ng-click의 동적 바인딩? 사용자가 특정 작업을 수행 할 때

var newElement = document.createElement('span'); 
newElement.innerHTML = "<a id='123' class='cite' href='' data-ng-click='review(123);'>[&#8225;]</span>"; 
range.insertNode(newElement); 
$compile($(newElement).contents())($scope); 

는 사용자가 클릭 새로운 분야 롭, 나는 활성화 컨트롤러의 검토 방법을 실행하려는 경우.

대신 페이지에서 '#'을 (를) 호출하지 않고도 검토();를 호출하지 않고 탐색합니다 ($ scope.review = function (id) {...}

click 메서드가 range.insertNode (newElement)를 호출하여 $ scope.review()에 '바인딩'되지 않는다고 가정합니다. ? 나는 $ apply에서 줄 바꿈을 시도했으나 효과가 없었다.

+0

#을 javascript : void (0) –

+0

와 교체 할 수 있습니다. [AngularJS의 앵커 태그에서 기본을 지우는 방법은 무엇입니까?] (http://stackoverflow.com/questions/10931315/how-to-preventdefault-on-anchor -tags-in-anglesjs) –

+1

기본 동작을 중지하는 방법에 관심이 없습니다. 문제는 요소 (및 ng-click)가 추가되었을 때 컨트롤러에 정의 된 review() 메소드를 실행하는 방법입니다 'on the fly' – ed4becky

답변

3

href="#" 대신에 href=""을 사용하십시오. href가 비어 있으면 기본 동작이 항상 방지됩니다. http://docs.angularjs.org/api/ng.directive:a

해당 요소가 $compile인지 확인하십시오. 당신이하는 일이 근본적으로 요소 목록을 만들고 있다면 이상적으로 이것은 ng-repeat의 경우 일 것입니다.

+0

OK, href = ""를 변경하고 컴파일 단계를 추가했지만 (위에서 편집 됨) 클릭 동작은 여전히 ​​발생하지 않음 – ed4becky

+0

Oh 및 ng-repeat는 요소가 아니기 때문에 이러한 요소가 희박하고 반복되지 않습니다. 편집 가능한 DIV에서 각주를 나타내는 스팬 추가하기 – ed4becky

+0

'$ compile ($ (newElement)) ($ scope);','.contents()'없이 해봤습니까? '$ compile (newElement) ($ scope);'로 충분할 수도 있습니다. –

0

템플릿 코드에서 href 속성을 모두 제거 할 수 있습니다. 네비게이션을 원하면 ng-click 표현식에 포함 시키십시오.

0

ng-click이 작동하려면 요소에서 href 태그가 필요하지 않습니다. 커서를 가져 가면 포인터가 변경되도록하려면 인라인 스타일이나 CSS를 사용할 수 있습니다.

관련 문제