2013-12-21 2 views
1

나는 다음과 같은 경로/자산/사용하고 AngularFire 0.5의 방법에 $ 몇 가지 문제를 겪고 발사하지 '로드'에 $/assetCollection를 : 문제는 는 AngularFire 0.5 올바르게

을 자산 ID 때 I/asset/: assetCollection에서/assets/: assetCollection/: assetId 데이터가 Firebase (Batarang에서 볼 수 있음)에서로드되지만 $ on ('loaded', function() {})은 절대 실행되지 않습니다.

경로 :

angular.module('imageGrid', 
    ['imageGrid.config', 'imageGrid.filters', 'imageGrid.services', 'imageGrid.directives', 'imageGrid.controllers', 'ngRoute', 'firebase'] 
) 

// configure views; note the authRequired parameter for authenticated pages 
.config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/assets/:assetCollection', { 
    authRequired: true, 
    templateUrl: 'partials/assets.html', 
    controller: 'AssetsCtrl' 
    }) 

    .when('/assets/:assetCollection/:assetId', { 
    authRequired: true, 
    templateUrl: 'partials/asset-detail.html', 
    controller: 'AssetDetailCtrl' 
    }) 

    .otherwise({ redirectTo: '/assets/all' }); 
}]) 

컨트롤러 :

.controller('AssetsCtrl', 
    ['$scope', '$routeParams', '$firebase', 'FBURL', 
    function($scope, $routeParams, $firebase, FBURL) { 
    // load data from firebase 
    var refAssets = new Firebase(FBURL).child('/assets'); 
    $scope.assets = $firebase(refAssets); 

    $scope.assetCollection = $routeParams.assetCollection; 
    $scope.pagetitle.pagename = 'Assets in category: ' + $scope.assetCollection; 
}]) 

.controller('AssetDetailCtrl', 
    ['$rootScope', '$scope', '$routeParams', '$firebase', 'FBURL', 
    function($rootScope, $scope, $routeParams, $firebase, FBURL) { 
    $scope.validAsset = undefined; 
    $scope.pagetitle.pagename = "Loading Asset..."; 
    $scope.assetId = $routeParams.assetId; 
    $scope.assetCollection = $routeParams.assetCollection; 

    // Load data from firebase 
    var refAsset = new Firebase(FBURL).child('/assets/' + $scope.assetId); 
    $scope.asset = $firebase(refAsset); 

    // when data is loaded check validity of the route 
    $scope.asset.$on('loaded', function(value) { 
     console.log('data loaded'); 
     if (value !== null) { 
     checkRoute(value.name, value.collections); 
     } else { 
     checkRoute(null); 
     } 
    }); 

    var checkRoute = function(name, collections) { 
     var isValid = function(assetCollections) { 
     var currentCollection = $scope.assetCollection; 
     /* Check validity of asset based on the following rules 
     * - When collection route is 'all' asset valid 
     * - When assets collection array contains the collection route asset is valid 
     * - Otherwise assume asset is invalid 
     */ 
     if (currentCollection === 'all') { 
      return true; 
     } else if (assetCollections !== undefined) { 
      if (assetCollections.indexOf(currentCollection) >= 0) { 
      return true; 
      } 
     } 
     return false; 
     }; 

     var isValidResponse = false; 
     // when data is loaded check the validity of the route 
     if (name !== null) { 
     isValidResponse = isValid(collections); 
     } 
     // Linked to ng-if on detail page to show asset detail or invalid route page 
     $scope.validAsset = isValidResponse; 
     // Set controller specific page title based on validity of asset route 
     if(isValidResponse) { 
     $scope.pagetitle.pagename = name; 
     } else { 
     $scope.pagetitle.pagename = 'ERROR: Asset does not exist'; 
     } 
     $scope.$apply(); 
    }; 
}]) 

경우 또한 발생하지 않습니다 assetCollection 경로 PARAM이 때 AssetsDetailCtrl 변경된다. 나는 그것을 기대하지 않았지만 언급 할 만하다고 생각했습니다.

는 또한 함수의 하중을 포장 시도했지만이 페이지는 경로 변경 후 갱신 된 경우 예상대로 중 하나

var loadAsset = function() { 
    // Load data from firebase 
    var refAsset = new Firebase(FBURL).child('/assets/' + $scope.assetId); 
    $scope.asset = $firebase(refAsset); 

    // when data is loaded check validity of the route 
    $scope.asset.$on('loaded', function(value) { 
    console.log('data loaded'); 
    if (value !== null) { 
     checkRoute(value.name, value.collections); 
    } else { 
     checkRoute(null); 
    } 
    }); 
}; 

$scope.$watch('assetCollection', loadAsset); 

모든 기능이 작동 작동하지 않았다. 경로 변경 후 $ on 메서드가 실행되지 않는 이유는 무엇입니까?

모든 조언을 주시면 감사하겠습니다. 여기에 전체 코드 샘플에 대한

내 REPO입니다 https://github.com/ThisIsMeh/imagegrid

+0

충분히

$scope.asset.$on('change', function() { var asset = $scope.asset; if (asset.name !== null) { checkRoute(asset.name, asset.collections); } else { checkRoute(null); } }); 

간단한 '변화'이벤트에 직접 평가할 수있다 "이벤트? –

+0

AngularFire 0.5에 내장 된 이벤트입니다. 로드 됨 : Firebase에서 초기 데이터를 수신하면 이벤트가 정확히 한 번 트리거됩니다. http://angularfire.com/documentation.html – Tg7z

+0

로드 된 이벤트는 초기 데이터가로드 될 때 한 번만 발생합니다. 경로를 변경하면 데이터가 Firebase에서 다시 다운로드되지 않고 대신 캐시에서 제공됩니다. 'changed'이벤트가 실행 중입니까? – Anant

답변

0

범위는 "로드는 방송 또는 방출 할