Question

我在AngularFire 0.5中的$ on方法遇到了一些麻烦我使用以下路由/ assets /：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();
    };
}])

当在AssetsDetailCtrl中更改：assetCollection路由参数时，它也不会触发。我不指望它，但我认为值得一提。

我也试过在一个函数中包装负载，但它不起作用

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

Answer 1

范围可在“变更”事件中直接评估

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

足够简单

'load'上的AngularFire 0.5 $未正确触发

1 个答案: