单击链接不显示页面（离子+角度）答案

【问题标题】：Clicking link does not display page ( ionic + angular )单击链接不显示页面（离子+角度）
【发布时间】：2015-08-07 22:48:44
【问题描述】：

我有一个项目列表，但是当我单击每个项目的 href 时，并没有将我带到详细页面。

还有，怎么才能把动画放到href的页面上呢？

这是我的 app.js 文件：

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

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

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

    $ionicConfigProvider.navBar.alignTitle("center"); // centrar titulo de cada contenido de tab

    $stateProvider
        .state("app",{
            templateUrl: "templates/app.html",
            url: "/app",
            abstract: true
        })
        .state("app.noticias", {
            url: "/noticias",
            views: {
                "app-noticias":{
                    templateUrl: "templates/noticias.html",
                    controller: "noticiasCtrl"
                }
            }
        })  
        .state("app.servicios", {
            url: "/servicios",
            views: {
                "app-servicios":{
                    templateUrl: "templates/servicios.html",
                    controller: "serviciosCtrl"
                }
            }
        })


        .state('forgotpassword', {
          url: "/forgot-password",
          templateUrl: "templates/forgot-password.html"
        })

        $urlRouterProvider.otherwise("/app/noticias"); // Para cuando no encuentre nada se vaya a la pagina que se quiere mostrar por default           

})

.controller("noticiasCtrl", function($scope)
{

    $scope.rawData = [{
      "tipo": "noticia",
      "titulo": "Fin de semana de Madres",
      "bg": "img1.png"
    }, {
      "tipo": "evento",
      "titulo": "Eminem en vivo, 10% off",
      "bg": "img2.png"
    }, {
      "id": "noticia",
      "titulo": "12 Cosas para comprar",
      "bg": "img3.png"    
    }];
})

.controller("serviciosCtrl", function($scope)
{

})

这是我的文件 noticias.html：

    <ion-view title="Noticias">

    <ion-content ng-controller="noticiasCtrl" style="top:0">
          <div class="header-image"></div>
          <ion-list>
            <ion-item ng-repeat="item in rawData" class="item-noticias overlay" ng-style="{'background':'url(img/{{item.bg}}) no-repeat center', 'background-size':'cover'}" >                
                <div class="overlay">       
                    <p>{{ item.tipo }}</p>
                    <p>{{ item.titulo }}</p>
                    <p><a href="#/app/forgot-password">Leer mas</a></p>

                </div>                        
            </ion-item>
          </ion-list>

      </ion-content>

</ion-view>

【问题讨论】：

您在控制台中看到任何错误吗？
不显示任何错误..

标签： angularjs ionic-framework angular-ui-router ionic

【解决方案1】：

你正在使用状态，所以使用 ui-sref 和这样的状态

<a ui-sref="home">Home</a> | <a ui-sref="about">About</a>

<ul>
    <li ng-repeat="contact in contacts">
        <a ui-sref="contacts.detail({ id: contact.id })">{{ contact.name }}</a>
    </li>
</ul>

使用 ui-sref="stateName" 代替 href 查看https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref

【讨论】：