(ionisch) Problem: $ state.go zeigt die Vorlage nicht

Ich habe ein Problem mit diesem Stück Code, wenn ich auf die Schaltfläche klicken, geschah nichts ... Normalerweise ist die Vorlage in "news.html "sollte angezeigt werden. Ich habe im Internet nachgesehen, aber nichts hilft mir ... Also, was läuft falsch, bitte?

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

"news.html"

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

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

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

Quelle

2017-04-18 Totof TonMomon

Das Problem ist der Name Ihrer Ansicht.

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

Ihre Tabs haben zwei Ansichten:

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

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

"home" und "Login". Sie versuchen, Ihre Ansicht in "News" zu laden, die nicht existiert. Wenn Sie das "News" => "home" ändern, wird es funktionieren.

Quelle

2017-04-18 17:31:18 yBrodsky

(ionisch) Problem: $ state.go zeigt die Vorlage nicht

Antwort

Verwandte Themen