Question

我正在根据列表项单击从db加载一些图像。一切正常但在加载图像网格模板/状态之前，我的离子框架+ angularjs应用程序正在从$urlRouterProvider.otherwise()打开默认状态。

如何防止这种情况发生并直接打开图像网格状态？

列表项html：

<ion-list id="fotos-list4" ng-show="albums_list">
  <ion-item class="item-icon-left item-icon-right calm" id="fotos-list-item4" ng-model="album_name" ng-repeat="item in albums" item="item" href="#/item/{{item.FOLDER}}" ng-click="open_album(item)">
     <i class="icon ion-images"></i>
        {{item.FOLDER}}
     <i class="icon ion-ios-arrow-forward"></i>
  </ion-item>
</ion-list>

图片网格html

<div class="row" ng-repeat="image in images" ng-if="$index % 2 === 0">
        <div class="col col-50" ng-if="$index < images.length">
            <img class="grid-thumb" ng-src="http://website.com/{{images[$index].FILE}}" width="100%" ng-click="showImages($index)" />
        </div>
        <div class="col col-50" ng-if="$index + 1 < images.length">
            <img class="grid-thumb" ng-src="http://website.com/{{images[$index + 1].FILE}}" width="100%" ng-click="showImages($index+1)" />
        </div>
</div>

routes.js

angular.module('app.routes', [])

.config(function($stateProvider, $urlRouterProvider) {

// DEFAULT PAGE
.state('cadastreSe', {
  url: '/page5',
  templateUrl: 'templates/cadastreSe.html',
  controller: 'cadastreSeCtrl'
})

// LIST ITEMS
.state('suporte', {
  cache: false,
  url: '/page7',
  templateUrl: 'templates/suporte.html',
  controller: 'suporteCtrl'
})

// IMAGE GRID
.state('fotos2', {
  cache: false,
  url: '/page8',
  templateUrl: 'templates/fotos2.html',
  controller: 'fotos2Ctrl',
  params: {
   dataToFotos: false
  }
})

$urlRouterProvider.otherwise('/page5')

controller.js

.controller('suporteCtrl', ['$scope', '$http', '$state', function ($scope, $http, $state) {

$scope.open_album = function(item){

    var dataToPass = {};

    $http.post("http://website.com/select-album-by-name.php", {'album_name': item.FOLDER}).then(function(response){

        console.log({'album_name': item.FOLDER});
        console.log(response);
        console.log(JSON.stringify(response));

        dataToPass.item = item;
        dataToPass.album = response.data;

        $state.go('fotos2', {dataToFotos: dataToPass});

    });

}


.controller('fotos2Ctrl', ['$scope', '$state', function ($scope, $state) {

$scope.myGoBack = function(){
    $state.go('suporte');
}

if(!$state.params.dataToFotos) {
    console.log($state.params.dataToFotos);
    alert("Error :(");
}else{
    console.log($state.params.dataToFotos);
    $scope.images = $state.params.dataToFotos.album;         
}

Answer 1

当我使用angular / ionic中的复杂甚至简单路由时，我喜欢设置类似于routes.js中的路由器模块。关键是使用run()功能，该功能仅在路由器模块初始化时运行。

angular.module('myapp.router', [])

.run( [ '$state', '$rootScope', function( $state, $rootScope ) {

    // you could set the state directly here
    $state.go('mystate');

    $rootScope.$on( '$stateChangeStart', function( evt, toState, toParams, fromState, fromParams, options ) {

        // or dynamically set the state based on logic here
        if( userIsLoggedIn ) {
            evt.preventDefault(); // prevent routing
            $state.go('user.account'); // go to page
        }
    });

}]);

AngularJS阻止$ urlRouterProvider.otherwise打开“默认”页面

1 个答案: