2013-12-21 57 views
1

我有我使用以下路線/資產/在AngularFire 0.5的方法一些麻煩與$:assetCollection /:由assetid

的問題是,當我從/ assets /: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路由參數是在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方法在路由更改後沒有觸發。

任何意見將不勝感激。

對於這裏的完整代碼示例是我的回購 https://github.com/ThisIsMeh/imagegrid

+0

你在哪裏播出或發出直接評估的「裝「事件? –

+0

這是AngularFire中的一個內置事件0.5 已加載:當從Firebase接收到初始數據時,該事件只會觸發一次。 http://angularfire.com/documentation.html – Tg7z

+0

加載的事件只會在加載初始數據時觸發一次。在路由更改時,數據不會再從Firebase下載,而是從緩存中提供。 「改變」事件是否正在燃燒? – Anant

回答

0

範圍是在「變」事件

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

夠簡單