0

タイトルが非常にわかりにくい場合は申し訳ありませんが、この例を複製しようとしています: 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

そのための最善の方法は何ですか？

4

1 に答える 1

2

修正について正確にはわかりませんが、削除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

于 2013-07-30T13:33:39.533 に答える