[英]AngularJS: directive's template is not rendering correctly
我在为下拉列表替换编写的指令中有一个非常奇怪的行为。 使用的模型可以使用子节点无限嵌套。 该指令包含在内(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
如果你在彼此之间嵌套了ng-repeats,那么它奇怪地呈现的原因是你在彼此之间使用相同的名称进行重复。 如果执行此操作,则在沿DOM树向下进行时基本上覆盖引用。
编辑:修改了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
。
问题是ng-include不会更新。 如果使用ng-if(添加一个元素)它可以工作!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.