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

I am working on an app to display a list of store locations and I have a list of ionic items that I can display. However, I cannot seem to select them and have them link to another view that has details about the selected item.

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

This is the view that contains the link:

这是包含链接的视图:

<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>

Here is the state:

这是州:

.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;
            });
        }
    };
});

and here is the controller:

这是控制器:

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

I assume there is some disconnect with the state params but I have checked and rechecked values. I am relatively new to angular and Ionic platform so I am worried I may just be missing some intricacy of the platform I just have not learned yet. I can provide a screen shot if that helps but basically the list is displayed and scroll-able but nothing can be selected.

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

Here is the services.js

这是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;
})

1 个解决方案

#1

In your ion-item, instead of this:

在你的离子项中,而不是这个:

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

you want something like this:

你想要这样的东西:

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

If you're trying to handle click events in angular, you need to use the ng-click directive. However, ui-router will handle this for you by using ui-sref.

如果您尝试以角度处理单击事件,则需要使用ng-click指令。但是,ui-router将使用ui-sref为您处理此问题。

#1