AngularJS：指令的模板無法正確呈現

Question

我在為下拉列表替換編寫的指令中有一個非常奇怪的行為。 使用的模型可以使用子節點無限嵌套。 該指令包含在內（HAML-Code）：

.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" }

正如我到目前為止遇到的那樣，該模型表現得非常正確！ 在調試視圖中或通過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

  }
]

指令的視圖模板代碼由rails控制器提供，它是用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'" }

我沒有遇到任何問題只有第二個下拉列表沒有正確更新其視圖，模型確實如此。 我想知道你是否可以幫助或看到一些不合法的東西。

親切的問候，Alex

Answer 1

如果你在彼此之間嵌套了ng-repeats，那么它奇怪地呈現的原因是你在彼此之間使用相同的名稱進行重復。 如果執行此操作，則在沿DOM樹向下進行時基本上覆蓋引用。

Answer 2

編輯：修改了plunker（ http://plnkr.co/edit/h6XdT5w0JRlVIQfxjByn?p=preview ），數據顯示在帶有子菜單的下拉菜單中（使用bootstrap 2.3.2和angular-ui 0.5.0）。

在我對您的問題發表評論后：

我對如何嵌套html標簽以獲取有效的html做了一些修改。 我從你在另一個SO問題中提到的一個plunker中獲取了你的源代碼（ angularjs：強制重新渲染/完全刷新指令模板 ）。

這是一個現場演示： http ： //plnkr.co/edit/JTt3moub2haMGxH65YtK？p = preview

我還將node.html模板放在自己的文件中，而不是script符號，如果沒有在正確的位置使用，可能會導致問題。 單擊某個項目時，它會正確設置為當前值。

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>

分層數據

$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 3

問題是ng-include不會更新。 如果使用ng-if（添加一個元素）它可以工作！