Question

我是离子和angular.js的新手。我从http://codepen.io/ionic/pen/mypxez下载了这个离子收集重复和导航示例。最初的示例与单个index.html和index.js文件完美配合。我试图将控制器，服务，app.js和HTML文件中的代码分开。我可以看到收藏品，但我无法看到细节并导航它。以下是显示所有可用集合的HTML文件：

<ion-view title="Home">
<ion-header-bar class="bar-subheader item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios7-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="filter">
</label>
</ion-header-bar>
<ion-nav-buttons side="right">
<a class="button" ng-click="scrollBottom()">
Scroll To Bottom
</a>
</ion-nav-buttons>
<ion-content>
<div class="list">
<a class="item my-item item-thumbnail-left"
collection-repeat="pet in pets | filter:filter"
collection-item-height="90" collection-item-width="'100%'"
ui-sref="tab.detail({petsId: pet.id })">
<img ng-src="http://placekitten.com/60/{{55 + ($index % 10)}}">
<h2>{{pet.firstName}}</h2>
<p>{{pet.id}}</p>
</a>
</div>
</ion-content>
</ion-view>

以下是app.js的代码：

.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.detail', {
url: "/detail/:petsId",
views: {
'main': {
controller:'DetailCtrl',
templateUrl: "templates/question-detail.html"
}
}
})

以下是永远不会被调用的控制器的代码：

.controller('DetailCtrl', function($scope, $stateParams, PetService) {
$scope.pet = PetService.get($stateParams.petsId);
})

...和question-detail.html代码：

<ion-view title="{{pet.id}}">
<ion-content class="padding">
{{pet.id}}
{{pet.firstName}}
</ion-content>
</ion-view>

我可以查看该集合并可以搜索，但我无法通过单击来查看详细信息。如果我点击第2项，我可以看到网址（http://localhost:8100/#/tab/detail/2），但我无法看到问题详情页面。

Answer 1

考虑到你对这个框架或angularJS本身很新。我只是在不说任何其他问题的情况下回答这个问题，但是对于将来，请先阅读文档。

<ion-view title="{{pet.id}}">
<ion-content class="padding">
<a href="detail/{{pet.id}}">{{pet.id}}</a>
{{pet.firstName}}
</ion-content>
</ion-view>

Answer 2

感谢karan的快速回答..我改变了两件事   代码现在正在运行：

我声明了锚标记的html文件。我改变了ui-sref   到href：

<div class="list">
                    <a class="item my-item item-thumbnail-left"
                       collection-repeat="pet in pets | filter:filter"
                       collection-item-height="90"
                       collection-item-width="'100%'" href="#/tab/detail/{{pet.id}}">
                      <img ng-src="http://placekitten.com/60/{{55 + ($index % 10)}}">
                        <h2>{{pet.firstName}}</h2>
                        <p>{{pet.id}}</p>

                        </a>
                      </div>

我的app.js文件

 .state('tab.detail', {
    url: '/detail/:petsId',
    views: {
      'tab-chats': {
        templateUrl: 'templates/question-detail.html',
        controller:'DetailCtrl'

      }
    }
  })

离子收集 - 重复工作导航无法点击

2 个答案: