AngularJS : 지시문의 템플릿이 올바르게 렌더링되지 않습니다.

Question

드롭 다운 대체를 위해 작성한 지시어에 정말 이상한 동작이 있습니다. 사용 된 모델은 자식 노드를 사용하여 무한대로 중첩 될 수 있습니다. 지시문이 (HAML-코드)와 같이 포함되어 있습니다 : 내가 지금까지 발생으로

.control-group 
    -# use the angular directive "dropdown-tree" that can handle unlimited nested models! 
    .controls{ "dropdown-tree" => "", "ng-model" => "categories_as_tree", "current-value" => "currentCategory", "dropdown-placeholder" => "choose category", "ng-disabled" => "!categories || categories.length==0", "on-change"=>"fetchProducts(category)" } 

%h4 Products 
.control-group 
    .controls{ "dropdown-tree" => "", "ng-model" => "products_as_tree", "current-value" => "currentProduct", "dropdown-placeholder" => "choose product", "ng-disabled" => "!products || products.length==0" } 

이 모델은 absolulately 제대로 작동하고! 디버그 뷰 또는 console.log 또는 $ log를 통해 얻을 수 있지만 지시문 렌더링은 두 번 또는 곱해진 항목을 표시하는 데 엉망이되어 드롭 다운을 몇 번 전환했는지에 따라 달라집니다.

커피 스크립트는 쉽게 코드 인 다음과 같습니다 지침의

# use array -> being resistend against uglifiers mangle 
mymodule.directive 'dropdownTree', [ -> 
    return { 
    templateUrl: '/angular/templates/dropdown_tree' 
    , 
    #require: 'ngModel', # don't need that so far, we keep things simple! 
    scope: { 
     ngModel: '=', 
     dropdownPlaceholder: '@', 
     currentValue: '=', 
     ngDisabled: '=', 
     onChange: '&' 
    }, 
    link: (scope, element, attr, ngModelCtrl) -> 

     # fake the ng-change 
     scope.$watch('currentValue', -> 
     scope.onChange() 
     , true) 

     scope.selectValue = (value) -> 
     scope.currentValue = value 

    } 
] 

뷰 템플릿 코드가 HAML로 작성하고 다음과 같습니다되는 레일 컨트롤러 에 의해 전달됩니다. 이 자식 노드가 존재하는 경우 무한 중첩을 사용

.btn-group{ :name => "FIXME", "ng-required" => "true" } 
    %a.btn.btn-default.dropdown-toggle{ "data-toggle" => "dropdown", href: "#", "ng-disabled"=>"ngDisabled" } 
    {{currentValue.name || dropdownPlaceholder }} 
    %span.caret 
    %ul.dropdown-menu{ "ng-show" => "!ngDisabled" } 
    %div{ "ng-repeat" => "model in ngModel", "ng-include" => "'node.html'" } 

%script{ :type => "text/ng-template", :id => "node.html" } 
    %li{ "ng-click" => "selectValue(model)" } 
    %a 
     {{model.name}} 
    %ul{ "ng-repeat" => "model in model.children", :style => "margin-left: 10px;" } 
    %div{ "ng-include" => "'node.html'" } 

내가 두 번째 드롭 다운이 올바르게보기를 업데이트하지 않습니다이 단지 하나에 문제가 없었어요,이 모델은 않습니다. 나는 합법적이지 않은 것을 당신이 도울 수 있거나 볼 수 있는지 궁금합니다.

종류와 관련, 알렉스

Answer 1

수정 : 하위 메뉴 (부트 스트랩 2.3.2 및 각도 -ui 0.5.0 사용)가있는 드롭 다운 메뉴에 데이터가 표시된 수정 된 플 런커 (http://plnkr.co/edit/h6XdT5w0JRlVIQfxjByn?p=preview).

나는 html 태그가 유효한 HTML를 얻기 위해 중첩 된 방법에 대한 몇 가지 수정을했다 : 귀하의 질문에 내 의견에 따라

. 나는 네가 다른 SO 질문 (angularjs: force re-rendering/ full refresh a directive template)에서 언급 한 플 런커에서 당신의 정보원을 가져 갔다. http://plnkr.co/edit/JTt3moub2haMGxH65YtK?p=preview

나는 또한 script 표기 대신에 자신의 파일에 따로 node.html 템플릿을했다 적절한 장소에서 사용하지 않을 경우 문제가 발생할 수 있습니다 : 여기

라이브 데모입니다. 항목을 클릭하면 현재 값으로 올바르게 설정됩니다.

template.html

<ul class='dropdown-menu' ng-show='!ngDisabled'> 
    <li ng-include="'node.html'" ng-repeat='model in ngModel'></li> 
    </ul> 

node.html

<a href="#" ng-click='selectValue(model)'>{{model.name}}</a> 
<ul> 
    <li ng-include="'node.html'" ng-repeat='model in model.children'></li> 
</ul> 

계층 적 데이터 내가 remov 방법

$scope.products = [ 
    {name: 'Product1', children: [ 
    {name:'Product1.1', children: [ 
     {name:'Product1.1.1'} 
    ]}, 
    {name:'Product1.2', children: [ 
     {name:'Product1.2.1'}, 
     {name:'Product1.2.2'}, 
     {name:'Product1.2.3', children: [{name:'Product1.2.3.1'}]}, 
     {name:'Product1.2.4'} 
    ]} 
    ]}, 
    {name: 'Product2', children: [ 
    {name:'Product2.1', children: [ 
     {name:'Product2.1.1'}, 
     {name:'Product2.1.2'} 
    ]},{name:'Product2.2', children: [ 
     {name:'Product2.2.1'}, 
     {name:'Product2.2.2'}, 
     {name:'Product2.2.3'} 
    ]} 
    ]} 
]; 

봐 ul 요소 안에 중첩되어서는 안되는 div을 수정했습니다.

Answer 2

은 서로 내에서 NG-반복을 중첩 한 경우 어쩌면 이상하게 렌더링 년대 이유는 당신이 서로 내에서 반복에 대해 동일한 이름을 사용하는 것입니다. 이렇게하면 DOM 트리를 진행하면서 참조를 기본적으로 덮어 씁니다.

Answer 3

문제는 ng-include가 업데이트되지 않는다는 것입니다.ng-if (하나 이상의 요소 추가)와 함께 사용하는 경우 작동합니다!