结合AJAX的数据NG-包括递归调用加载模板 [英] Binding ajax data to ng-include with recursive call to load template
问题描述
很抱歉,如果标题是相当神秘,我想复制这个例子: http://plnkr.co/edit/NBDgqKOy2qVMQeykQqTY?p=$p$pview ,它工作正常,但如果我通过ajax加载数据,这是行不通的。
原来的控制器是:
Sorry if the title is quite cryptic, I'm trying to replicate this example: http://plnkr.co/edit/NBDgqKOy2qVMQeykQqTY?p=preview and it works fine, but if I load data via ajax it doesn't work. The original controller is:
app.controller('MainCtrl', function($scope) {
$scope.links = [
{
text: 'Menu Item 1',
url: '#',
},{
text: 'Menu Item 2',
url: '#',
submenu: [
{
text: 'Sub-menu Item 3',
url: '#',
},{
text: 'Sub-menu Item 4',
url: '#',
submenu: [
{
text: 'Sub-sub-menu Item 5',
url: '#',
},{
text: 'Sub-sub-menu Item 6',
url: '#',
}
]
}
]
},{
text: 'Menu Item 3',
url: '#',
}
];
});
而我的是:
app.controller('SiteTreeCtrl', function ($scope, $http) {
$http.post('/ajaxsite/tree', { section: "website" }).success(function (data) {
$scope.folders = data.links;
});
});
问题是,HTML模板被加载的前的数据,并在数据准备好已经应用的结合。
the problem is that the html template is loaded before the data and when data is ready the binding is already applied.
工作例子(没有AJAX):
http://plnkr.co/edit/NBDgqKOy2qVMQeykQqTY?p=$p$pview一>
不工作的例子(阿贾克斯):
http://plnkr.co/edit/lF5VkRT67IybRQm5yTuB?p=$p$pview一>
什么是最好的方式来呢?
What is the best way to to that?
推荐答案
我不完全相信我的修正,但是当我删除 NG-的init =子菜单=链接;
和 NG-模型
,然后它的作品。
I am not exactly sure about my fix, but when I remove ng-init="submenu = links;"
and replace with ng-model
, then it works.
请看看演示。也许是因为 NG-包括
创建其自己的范围,并以某种方式在 NG-INIT
不能抓住从范围值。
Please take a look at the demo. Maybe because ng-include
creates its own scope and somehow the ng-init
can not grab the value from the scope.
下面是我的修正:
<div ng-include="'partialMenu.html'" ng-model="submenu"></div>
$scope.submenu = $scope.links;
<大骨节病> 演示上plunker 骨节病>
这篇关于结合AJAX的数据NG-包括递归调用加载模板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!