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
충분히
간단한 '변화'이벤트에 직접 평가할 수있다 "이벤트? –
AngularFire 0.5에 내장 된 이벤트입니다. 로드 됨 : Firebase에서 초기 데이터를 수신하면 이벤트가 정확히 한 번 트리거됩니다. http://angularfire.com/documentation.html – Tg7z
로드 된 이벤트는 초기 데이터가로드 될 때 한 번만 발생합니다. 경로를 변경하면 데이터가 Firebase에서 다시 다운로드되지 않고 대신 캐시에서 제공됩니다. 'changed'이벤트가 실행 중입니까? – Anant