Question

我正在开发一个应用程序来显示商店位置列表，我有一个可以显示的离子项列表。但是，我似乎无法选择它们并将它们链接到另一个包含所选项目详细信息的视图。

这是包含链接的视图：

<ion-content has-footer="true" has-header="true">

    <ion-list has-footer="true" has-header="true" can-swipe="listCanSwipe">

        <ion-item  detail-push ng-repeat="locale in locations" type="item-text-wrap" onclick = "#/tab/location/{{locale.friendlyName}}">                   
            <h2><b> {{locale.friendlyName}}</b></h2>
            <h3>                   
                {{locale.address}}, {{locale.city}}, {{locale.state}}
            </h3>    
        </ion-item>
    </ion-list>
</ion-content>
<ion-content>
    <ion-footer-bar position="bottom" class="bar-balanced">
        <a class = "button icon ion-earth item-center" href="#/tab/map" onclick="mapOn()">Locations Near Me</a> 
    </ion-footer-bar>
</ion-content>

这是州：

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

    // Ionic uses AngularUI Router which uses the concept of states
    // Learn more here: https://github.com/angular-ui/ui-router
    // Set up the various states which the app can be in.
    // Each state's controller can be found in controllers.js
    $stateProvider

    // setup an abstract state for the tabs directive
      .state('tab', {
          url: '/tab',
          abstract: true,
          templateUrl: 'templates/tabs.html'
      })

    // Each tab has its own nav history stack:

    .state('tab.dash', {
        url: '/dash',
        views: {
            'tab-dash': {
                templateUrl: 'templates/tab-dash.html',
                controller: 'DashCtrl'
            }
        }
    })

    .state('tab.location', {
        url: '/location',
        views: {
            'tab-location': {
                templateUrl: 'templates/tab-location.html',
                controller: 'LocCtrl'
            }
        }
    })

    .state('tab.account', {
        url: '/account',
        views: {
            'tab-account': {
                templateUrl: 'templates/tab-account.html',
                controller: 'AccountCtrl'
            }
        }
    })
    .state('tab.map', {
        url: '/map',
        views: {
            'tab-location': {
                templateUrl: 'templates/tab-map.html',
                controller: 'MapCtrl'
            }
        }
    }
    )
    .state('tab.detail', {
        url: '/location/:locId',
        views: {
            'tab-location': {
                templateUrl: 'templates/location-detail.html',
                controller: 'DetCtrl'
            }
        }
    });
    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/tab/location');

})
.directive('hideTabs', function ($rootScope) {
    return {
        restrict: 'A',
        link: function (scope, element, attributes) {
            scope.$watch(attributes.hideTabs, function (value) {
                $rootScope.hideTabs = value;
            });

            scope.$on('$ionicView.beforeLeave', function () {
                $rootScope.hideTabs = false;
            });
        }
    };
});

这是控制器：

.controller('DetCtrl', function ($scope, $http, $stateParams, Locations) {
Locations.get($stateParams.locId).then(function (result) {
    $scope.loc = result;
})
});

我认为与状态参数有一些脱节，但我检查并重新检查了值。我对角度和离子平台相对较新，所以我担心我可能只是错过了一些我还没有学到的平台错综复杂的东西。我可以提供一个屏幕截图，如果这有帮助，但基本上列表显示和滚动，但没有任何东西可以选择。

这是services.js

    angular.module('starter.services', [])

.factory('Locations', function ($http, $q) {
    // Might use a resource here that returns a JSON array
    var url = "https://portal.mobilequbes.com/api/kiosks?callback=JSON_CALLBACK";
    return {
        all: function () {
            return $http.jsonp(url)
                .then(function (result) {
                    return result.data;
                });
        },
        remove:{
        },
        get: function (locId) {
            for (i = 0; i < Locations.all().length; i++) {
                if (Locations.all()[i].friendlyName == locId) {
                    return Locations.all()[i];
                }
            }
        }

    }
    return null;
})

Answer 1

在您的离子项中，而不是：

onclick = "#/tab/location/{{locale.friendlyName}}"

你想要这样的东西：

ui-sref='tab.detail({locId : locale.friendlyName})'

如果您尝试处理角度中的点击事件，则需要使用ng-click指令。但是，ui-router将使用ui-sref来处理这个问题。

Controller / Services.js无法使用href转到模板

1 个答案: