Question

很抱歉，如果标题非常神秘，我正在尝试复制这个示例：http://plnkr.co/edit/NBDgqKOy2qVMQeykQqTY?p=preview并且它工作正常，但如果我通过ajax加载数据则不起作用。原始控制器是：

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模板在数据之前加载，当数据准备就绪时，绑定已经应用。

工作示例（没有ajax）： http://plnkr.co/edit/NBDgqKOy2qVMQeykQqTY?p=preview

不工作的示例（ajax）： http://plnkr.co/edit/lF5VkRT67IybRQm5yTuB?p=preview

最好的方法是什么？

Answer 1

我对我的修复程序并不完全确定，但当我删除ng-init="submenu = links;"并替换为ng-model时，它就能正常运行。

请看看演示。也许是因为ng-include创建了自己的范围，并且ng-init无法从范围中获取值。

这是我的修复：

<div ng-include="'partialMenu.html'" ng-model="submenu"></div>

$scope.submenu = $scope.links;

的 Demo on plunker

通过递归调用加载模板将ajax数据绑定到ng-include

1 个答案: