2014-01-30 4 views
1

Я смотрю в angularJS, но я все еще новичок ... И у меня есть простой вопрос, на который я надеюсь, что вы сможете ответить.AngularJS ждет данных для визуализации представления?

я получил следующий маршрут:

app.config(function($routeProvider) { 
    $routeProvider 
    .when('/', { 
    controller:'ListCtrl', 
    templateUrl:'list.html' 
    }) 
    .when('/update/:itemId', { 
    controller:'UpdateCtrl', 
    templateUrl:'update.html' 
    }) 
    [...] 
    .otherwise({ 
    redirectTo:'/' 
    }); 
}); 

Из "списка" вид я вновь корневым к "Обновить" вид с помощью location.path:

app.controller('ListCtrl', function($scope, albumFactory, $location, $http) { 
    $scope.albums = albumFactory.getList().then(function(albums){ 
     $scope.albums = albums; 
    }); 
    [...] 
    $scope.updateAlbum = function(index) { 
     console.log('updateAlbum()'); 
     $location.path("/update/" + $scope.albums.albums[index].id); 
    } 

В Update Контроллер Мне нужно сначала получить деталь, чтобы предварительно заполнить представление. Для этого я использую фабрику, как следующим образом:

app.controller('UpdateCtrl', function($scope, albumFactory, $location, $routeParams, $http) { 

    $scope.album = albumFactory.get($routeParams.itemId).then(function(album){ 
     $scope.album = album; 
    }); 

Так что моя проблема заключается в том, что точка зрения первой визуализации (отображается) пусто. После завершения вызова Ajax с моей фабрики область обновления обновляется, и представление заполняется.

Можно ли дождаться ответа фабрики до частичного просмотра? Или, может быть, я что-то не так?

Цель состоит в том, чтобы избежать короткого времени, когда вид пуста ... (на самом деле не дружелюбных)

+3

см. 'Решение:' [docs] (http://docs.angularjs.org/api/ngRoute.$routeProvider) – calebboyd

ответ

2

Вы должны использовать $route рассасывается.

app.config(function($routeProvider) { 
    $routeProvider 
    .when('/', { 
    controller:'ListCtrl', 
    templateUrl:'list.html' 
    resolve : { 
     resolvedAlbums: function(albumFactory) { 
     return albumFactory.getList(); 
     } 
    } 
    }), 
    .when('/update/:itemId', { 
    controller:'UpdateCtrl', 
    templateUrl:'update.html', 
    resolve : { 
     // you can inject services in resolves, in this case you also need `$route` 
     // to get the `itemId` 
     resolvedAlbum: function(albumFactory, $route) { 
     return albumFactory.get($route.current.params.itemId); 
     } 
    } 
    }) 
}); 

Вы можете вводить разрешенные данные в контроллерах, как это:

app.controller('ListCtrl', function($scope, resolvedAlbums) { 
    $scope.albums = resolvedAlbums; 
    ... 
}); 

app.controller('UpdateCtrl', function($scope, resolvedAlbum) { 
    $scope.album = resolvedAlbum; 
    ... 
}); 

мнение не изменится, пока после поступления данных (обещание разрешено).

+0

Да! Он много благодарен! –

Смежные вопросы