AngularJS-ng-click이 하위 요소에서 작동하지 않습니다.

Question

좋아, AngularJS를 사용하여 eBay와 같은 범주 브라우저를 만들려고합니다.

이

<div id='root'> 
    <ul> 
     <li data-ng-repeat='category in categories'> 
      <a href='#' 
       data-ng-bind='category.Name' 
       data-ng-click='browseCategories(category, "children-1")'> 
      </a> 
     </li> 
    </ul> 
</div> 

<div id='children-1'> 
</div> 

<div id='children-2'> 
</div> 

browseCategories 방법의 목적은 선택된 카테고리의 아이들과 children-1 DIV를 채우는 것입니다 :

나는 루트 범주가 있습니다.

$scope.browseCategories = function(category, moveTo) { 

    //looping in order to create a new <ul> of children categories. 
    var html = "<ul class='unstyled'>"; 
    for (var I = 0; I < category.Children.length; ++I) { 
     var category = category.Children[I]; 
     html += "<li><a href='#' data-ng-click='browseCategories(" + 
      category + ", 'children-1')'>" + category.Name + "</a>"; 
    } 
    html += "</ul>"; 

    var elMoveTo = angular.element(moveTo); 
    $(elMoveTo).html(html); 
} 

글쎄, 새로운 <ul> 제대로 요소에 첨부되어 있지만 browseCategories 방법은 작업을 중지합니다. 무슨 일이야? 모든

Answer 1

나는 내 댓글에서 언급 한 바와 같이, 당신은 "컴파일"로 $ 컴파일 서비스를 사용할 필요가 각도 뭔가에 원시 HTML은 이해한다. 이걸 설명하는 Plunker을 만들었습니다. 코드와 일부 가정에 대한 내용을 변경했습니다. $scope.categories 배열의 모양입니다. 바라기를 나는 근거가 없다.

link: function(scope, element) { 

    scope.browseCategories = function(category, moveTo) { 

    console.log("category", category); 
    scope.c = category; 

    //looping in order to create a new <ul> of children categories. 
    var html = "<ul class='unstyled'>"; 
    for (var I = 0; I < category.Children.length; ++I) { 
     var c = category.Children[I]; 
     html += "<li><a href='#' data-ng-click=\"browseCategories(c, 'children-3')\">" + category.Name + "</a>"; 
    } 
    html += "</ul>"; 

    var link = $compile(html); 
    var content = link(scope); 
    $("#" + moveTo).html(content); 
    } 
}, 

는 그래서 $compile 서비스를 사용하기 전에, 당신은 scope 너무 각도가 $("#" + moveTo).html(content);를 통해 다시 화면에 그리는 후 browseCategories로 전달되는 것을 알고에 category 배열을 바인드해야 것입니다.

html += "<li><a href='#' data-ng-click=\"browseCategories(c, 'children-3')\">" + category.Name + "</a>"; 

@Raghav, 당신은 타사 라이브러리에 의존하고 원시 HTML을 처리 할 $compile 서비스를 사용하지,이 같은 기술을 피하려고 언급 한대로 variable c는 일반적으로

에 전달되는 통지 .

바라기를 이것은 당신이 노력하고있는 목표를 달성하는 데 도움이되기를 바랍니다.

편집 : 나는에 대한 올바른 ID 값을 내 Plunker 업데이트 아이들 DIV 더 나은 당신은 재귀 목록을하려고하는 기능

Answer 2

에 대한

덕분에 클릭했을 때 재귀 ngRepeat이

How can I make recursive templates in AngularJS when using nested objects?

당신의 browseCategories 기능이 바로 자식 목록을로드 할 수보십시오. 당신의 for 루프에서

Answer 3

, 당신은 변수

$scope.browseCategories = function(category, moveTo) { 

    //looping in order to create a new <ul> of children categories. 
    var html = "<ul class='unstyled'>"; 
    for (var I = 0; I < category.Children.length; ++I) { 
     var category = category.Children[I]; 
      ^^^^^^^^ 

그 이름을 바꾸는 시도하고 참조 이미있는 var category를 만들었습니다.

달성하려는 모든 작업을 수행 할 수 있습니다. 희망이 도움이됩니다.

그러나 각도를 사용하면 가장 좋은 방법은 jQuery와 같은 다른 라이브러리를 피하고 각도를 맞추어 시도하는 것입니다. 각이 너무 강력합니다.

는 SO 게시물이 참조 : "Thinking in AngularJS" if I have a jQuery background?