Question

我是离子和角度框架的新手，我正在创建离子的演示应用程序，但无法从列表项呈现视图。当我点击登录按钮完美加载列表项目，但当我点击主页链接时，它将进入默认路由登录。

我的 index.html 文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Hydro App</title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->
    <!--For users deploying their apps to Windows 8.1 or Android Gingerbread, platformOverrided.js
    will inject platform-specific code from the /merges folder -->
    <script src="js/platformOverrides.js"></script>

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
</head>
<body ng-app="starter">
    <ion-header-bar align-title="center" class="bar-positive">
        <div class="buttons" ng-show="user.show">
            <button class="button button-icon icon ion-navicon ion-ios-minus-outline"></button>
        </div>
        <h1 class="title">GDMS App</h1>
        <div class="buttons" ng-show="user.show">
            <button class="button icon ion-home"></button>
        </div>
    </ion-header-bar>
    <ion-nav-view></ion-nav-view>
    <script id="templates/login.html" type="text/ng-template">
        <ion-view view-title="Sign-In">
            <ion-content class="has-header has-subheader" scrollbar-y="false" overflow-scroll="false">
                <div class="list">
                    <label class="item item-input">
                        <span class="input-label">Username :</span>
                        <input type="text" ng-model="user.username">
                    </label>
                    <label class="item item-input">
                        <span class="input-label">Password :</span>
                        <input type="password" ng-model="user.password">
                    </label>
                </div>
                <div class="padding">
                    <button class="button button-block button-positive" ng-click="signIn(user)">
                        Sign-In
                    </button>
                    <p class="text-center">
                        <a href="#/forgot-password">Forgot password</a>
                    </p>
                </div>
            </ion-content>
        </ion-view>
    </script>
    <script id="templates/menu.html" type="text/ng-template" >
        <ion-view>
            <ion-content overflow-scroll="false">
                <ion-list>
                    <ion-item menu-close href="#/tabs/home">
                        Home
                    </ion-item>
                    <ion-item menu-close href="#/tabs/browse">
                        Browse
                    </ion-item>
                    <ion-item menu-close href="#/tabs/playlists">
                        Playlists
                    </ion-item>
                    <ion-item menu-close href="#/tabs/weather">
                        Weather
                    </ion-item>
                </ion-list>
            </ion-content>
        </ion-view>
    </script>

    <div class="bar bar-footer">
        <h1 class="title">BMRC @2016</h1>
    </div>
    <script src="js/controllers.js"></script>
</body>    
</html>

home.html的

<ion-view view-title="Home"  >
    <ion-content class="padding has-header">
       <h1>
          Home
       </h1>
    </ion-content>
</ion-view>

App.js

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

.run(function ($ionicPlatform) {
    $ionicPlatform.ready(function () {
        if (cordova.platformId === "ios" && window.cordova && window.cordova.plugins.Keyboard) {

            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);


            cordova.plugins.Keyboard.disableScroll(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
})

.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('loginapp', {
        url: '/login',
        templateUrl: 'templates/login.html',
        controller: 'AppCtrl'
    })
    .state('tabs', {
        url: '/tabs',       
        templateUrl: 'templates/menu.html'
    })
    .state('tabs.home', {
        url: '/home',       
        views:{
            'view-home': {
                templateUrl: 'templates/home.html'
            }
        } 
    });
    $urlRouterProvider.otherwise('/login');

});

controller.js

angular.module('starter.controllers', [])
.controller('AppCtrl', function ($scope, $ionicModal, $timeout, $state, $ionicPopover) {
    $scope.user = {};
    $scope.user.show = true;
    $scope.signIn = function (user) {
        console.log('Sign-In', user);
        $state.go('tabs');
    };
    $scope.menuhome = function () {
        console.log('Home');
        $state.go('tabs.home');
    };

})
.controller('MenuCtrl', function ($scope, $ionicModal, $timeout, $state, $ionicPopover) {
    $scope.menuclick = function () {
        alert('hi');
    };   
})
;

请建议我如何正确地做到这一点。

Answer 1

我不确定你要在这里完成什么，但让我们看看。

因此，应该改变状态的范围是：

$scope.menuhome = function () {
    console.log('Home');
    $state.go('tabs.home');
};

该范围由AppCtrl控制。 AppCtrl控制login.html视图。所以它不起作用

让我们打破它。你说这个范围有效：

$scope.signIn = function (user) {
    console.log('Sign-In', user);
    $state.go('tabs');
};

为什么会这样？同样，它位于AppCtrl中并控制login.html视图。

这段代码可以解决问题

<button class="button button-block button-positive" ng-click="signIn(user)">
    Sign-In
</button>

但话说再看看$ scope.menuhome。你没有在任何地方打电话。

另外，不要在index.html中编写模板。创建文件夹模板，并生成login.html等文件。然后，在您的索引html中使用<ion-nav-view>

如何加载列表项上的视图单击离子角应用程序

1 个答案: