个人中心
gpt4 book ai didi

javascript - (ionic) 问题 : $state. go 不显示模板

转载 作者：行者123 更新时间：2023-12-03 04:31:15 25 4
gpt4 key购买 nike

我对这段代码有疑问，当我单击按钮时，没有任何反应......通常，应该显示“news.html”内的模板。我已经在互联网上检查过，但没有任何帮助...请问出了什么问题？

“app.js”

var nameApp = angular.module('starter', ['ionic']);

nameApp.config(['$stateProvider', '$urlRouterProvider', '$ionicConfigProvider', function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$stateProvider
  .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'tabs.html'
  })

  .state('tab.home', {
    url: '/home',
    views: {
      'home': {
        templateUrl: 'home.html',
        controller: 'HomeCtrl'
      }
    }
  })

  .state('tab.news', {
    url: '/news',
    views: {
      'News': {
        templateUrl: 'news.html',
        controller: 'HomeCtrl'
      }
    }
  })

$urlRouterProvider.otherwise('/tab/home');

}]);

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

  $scope.goNews = function () {
    $state.go("tab.news");
  };

}]);

“index.html”

<html ng-app="starter">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
  <title>Ionic Framework Example</title>
  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
  <link href="style.css" rel="stylesheet"/>
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  <script src="app.js"></script>
</head>

<body>
  <ion-nav-bar class="bar-stable">
    <ion-nav-back-button>
    </ion-nav-back-button>
  </ion-nav-bar>

  <ion-nav-view>

  </ion-nav-view>
</body>

</html>

“tabs.html”

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <!-- Home Tab -->
  <ion-tab title="Home" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" href="#/tab/home">
    <ion-nav-view name="home"></ion-nav-view>
  </ion-tab>

  <!-- Login Tab -->
  <ion-tab title="Login" icon-off="ion-ios-locked-outline" icon-on="ion-ios-locked" href="#/tab/login">
    <ion-nav-view name="login"></ion-nav-view>
  </ion-tab>

</ion-tabs>

“home.html”

<ion-view title="Home">
  <ion-content class="padding">
    <button type="submit" class="button button-block button-positive" ng-click="goNews()"> News </button>
  </ion-content>
</ion-view>

“新闻.html”

<ion-view title="News">
  <ion-content class="padding">

    <div class="padding">
      <h1> News </h1>
    </div>

  </ion-content>
</ion-view>

最佳答案

问题在于您的 View 名称。

.state('tab.news', {
    url: '/news',
    views: {
      'News': { //<= this is the name of the ui-view in which this state loads. 
        templateUrl: 'news.html',
        controller: 'HomeCtrl'
      }
    }
  })

您的选项卡有两个 View :

  <!-- Home Tab -->
    <ion-nav-view name="home"></ion-nav-view>

  <!-- Login Tab -->
    <ion-nav-view name="login"></ion-nav-view>

“主页”和“登录”。您正在尝试加载“新闻”中不存在的 View 。如果您更改“新闻”=>“主页”，它将起作用。

关于javascript - (ionic) 问题 : $state. go 不显示模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43478066/

25 4 0
文章推荐： javascript - 使用 setInterval 循环从网页上的 JavaScript 发布到 Node 端点
文章推荐： Javascript:转换 HTML 实体然后下载 HTML
文章推荐： javascript - 在 'x' 、 'y' 、 'z' 迭代上追加数组
文章推荐： javascript - JavaScript 上日期对象的问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com