Question

我已经进行了双重检查和三重检查错别字，但是我的离子应用仍无法为我的标签加载模板。

app.js

angular.module('testing', ['ionic', 'ngIOS9UIWebViewPatch', 'ngMaterial', 'ngMessages', 'ngCordova'])
    .run(function($ionicPlatform, $cordovaSQLite, $rootScope, $ionicHistory, $state, $mdDialog, $mdBottomSheet) {
        /**
         * Ionic on-ready function
         */
        $ionicPlatform.ready(function() {
            ionic.Platform.isFullScreen = true;
            if (window.cordova && window.cordova.plugins.Keyboard) {
                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
                cordova.plugins.Keyboard.disableScroll(true);
            }
            if (window.StatusBar) {
                StatusBar.styleDefault();
            }
        });
    })
    .config(function($ionicConfigProvider, $stateProvider, $urlRouterProvider, $mdThemingProvider, $mdIconProvider, $mdColorPalette, $mdIconProvider) {
        /*
         * States
         */
        $stateProvider
            .state('app', {
                url: "/app",
                abstract: true,
                templateUrl: "elements/menu/menu.html"
            })
            .state('app.feed', {
                url: "/feed",
                views: {
                    'tab-feed': {
                        templateURL: "elements/feed/feed.html",
                        controller: 'feedCtrl'
                    }
                }
            })
            .state('app.patients', {
                url: "/patients",
                views: {
                    'tab-patients': {
                        templateURL: "elements/patient/patient.html",
                        controller: 'patientCtrl'
                    }
                }
            })
            .state('app.settings', {
                url: "/settings",
                views: {
                    'tab-settings': {
                        templateURL: "elements/settings/settings.html",
                        controller: 'settingsCtrl'
                    }
                }
            });

        /**
         * Takes care of otherwise URL redirect to the start page
         */
        $urlRouterProvider.otherwise('/app/patients');
    });

菜单html：

<ion-tabs class="tabs-striped tabs-icon-top">

   <ion-tab title="Feed" icon-on="ion-ios-paper" icon-off="ion-ios-paper-outline" href="#/app/feed">
      <ion-nav-view name="tab-feed"></ion-nav-view>
    </ion-tab>

    <ion-tab title="Patients" icon-on="ion-ios-people" icon-off="ion-ios-people-outline" href="#/app/patients">
      <ion-nav-view name="tab-patients"></ion-nav-view>
    </ion-tab>

    <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline" href="#/app/settings">
      <ion-nav-view name="tab-settings"></ion-nav-view>
    </ion-tab>

</ion-tabs>

最后是部分模板html：

<ion-view>
  Patient List 
  <ion-content class="padding">
    <p>something or the other</p>
  </ion-content>
</ion-view>

以上html中没有显示任何内容。我检查了该部分，一切都在那里，直到离子导航视图，进一步嵌套的部分根本不在生成的代码中。

我错过了什么？我对所有这些标签的控制器只是占位符。控制台中没有错误。

Answer 1

您是否链接了控制器文件？您必须在app.js上声明您的文件，如下所示：

angular.module('testing', [
  'ionic', 
  'ngIOS9UIWebViewPatch', 
  'ngMaterial', 
  'ngMessages', 
  'ngCordova',
  'testing.controllers'
])

如果你错过了，你会得到你描述的所有HTML。

模板未加载离子导航视图

1 个答案: