0

在我为下拉替换而编写的指令中，我有一个非常奇怪的行为。使用的模型可以使用子节点无限嵌套。该指令是这样包含的（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'" }

我对此没有任何问题，只有第二个下拉列表没有正确更新其视图，模型确实如此。我想知道您是否可以提供帮助或查看不合法的内容。

亲切的问候，亚历克斯

4

3 回答 3

1

如果您在彼此之间嵌套了 ng-repeats，那么它呈现奇怪的原因可能是您在彼此之间使用相同的重复名称。如果你这样做，你实际上会在你沿着 DOM 树前进时覆盖引用。

于 2013-10-12T20:08:51.213 回答
1

编辑：修改后的 plunker（http://plnkr.co/edit/h6XdT5w0JRlVIQfxjByn?p=preview），数据显示在带有子菜单的下拉菜单中（使用 bootstrap 2.3.2 和 angular-ui 0.5.0）。

根据我对您的问题的评论：

我对如何嵌套 html 标签以获得有效的 html 进行了一些更正。我从你在另一个 SO 问题中提到的一个 plunker 中获取了你的资源（angularjs: force re-rendering/full refresh a directive template）。

这是一个现场演示：http ://plnkr.co/edit/JTt3moub2haMGxH65YtK?p=preview

我还将node.html模板放在它自己的文件中，而不是script在正确的位置使用可能导致问题的符号。当您单击一个项目时，它被正确设置为当前值。

模板.html

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

节点.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'}
    ]}
  ]}
];

看看我是如何删除div不应该嵌套在ul元素内的。

于 2013-10-13T00:59:27.100 回答
0

问题是 ng-include 没有更新。如果与 ng-if 一起使用（再添加一个元素），它会起作用！

于 2013-10-13T14:04:35.093 回答