Question

这是一个奇怪的，我只是放弃它。我正在制作Ionic的应用程序，它允许我添加状态就好了，像这样：

 $stateProvider
        .state('menu', {
            url: "/menu",
            templateUrl: "templates/menu.html",
            controller: "mainCtrl"
        })
        .state('products', {
            url: "/products",
            templateUrl: "templates/products.html",
            controller: "productsCtrl"
        })

等。我在那里有几个州，几天前一切正常。我今天回到了这个项目并添加了一个新的状态 - 它打破了。我添加新状态的方式与旧状态完全相同 - 甚至在我看到它不起作用时复制粘贴会发生什么事情是浏览器开始一遍又一遍地请求默认值（每秒多次）并且没有模板加载。

现在是奇怪的部分。这是我的新状态：

.state('settings',{
            url: "/settings",
            templateUrl: "templates/settings.html",
            controller: "settingsCtrl"
        })

但是当我将templateUrl更改为template并直接插入模板文件的全部内容时 - 它运作正常。

该模板文件位于与其他工作完全相同的位置，并且不会破坏应用程序。

更新：如果我使templateUrl函数返回文件的绝对路径（虽然不是像其他人那样的相对路径），它也有效。也许这是一个缓存问题？

也许我还需要做些什么？我是Ionic和Angular的新手。

更新这是我的整个app.js

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

.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) {
  // org.apache.cordova.statusbar required
  StatusBar.styleDefault();
   }
});
})

.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    });

    $stateProvider
        .state('menu', {
            url: "/menu",
            templateUrl: "templates/menu.html",
            controller: "mainCtrl"
        })
        .state('products', {
            url: "/products",
            templateUrl: "templates/products.html",
            controller: "productsCtrl"
        })
        .state('settings',{
            url: "/settings",
            templateUrl: function (){return "myproject/www/templates/settings.html"},
            controller: "settingsCtrl"
        })
        .state('leads', {
            abstract: true,
            url: "/leads",
            template: '<ion-nav-view></ion-nav-view>'
        })
        .state('leads.index', {
            url : "",
            templateUrl: "templates/leads.html",
            controller: "leadsCtrl"
        })
        .state('leads.detail', {
            url: '/{lead_id}',
            templateUrl: "templates/lead.html",
            controller: "leadCtrl",
            resolve:
            {
                lead_id: function ($stateParams) {
                    return $stateParams.lead_id}
            }
        })
    $urlRouterProvider.otherwise('/menu');
});

Answer 1

为$ stateChangeError，$ stateChangeStart和$ stateChangeSuccess添加一个监听器并登录到控制台 - 你会突然看到你的应用中发生了什么。之后应该很容易解决。

请点击此处查看示例：angularjs routes, how to check if template file exists

Answer 2

很难说，你的问题在哪里。所以我created working plunker，其设置如下所示。请观察并与您的本地版本进行比较。它可以帮助您揭示问题

$locationProvider.html5Mode({
    enabled: true,
    requireBase: false,
});

$stateProvider
    .state('menu', {
        url: "/menu",
        templateUrl: "templates/menu.html",
        controller: "mainCtrl",
    })
    .state('products', {
        url: "/products",
        views : {
          "products" : {
            templateUrl: "templates/products.html",
            controller: "productsCtrl"
          }
        }
    })
    .state('settings',{
        url: "/settings",
        //templateUrl: function (){return "myproject/www/templates/settings.html"},
        views : {
          "settings" : {
            templateUrl: "templates/settings.html", 
            controller: "settingsCtrl"
          }
        }
    })

这是index.html

<body ng-app="starter" animation="slide-left-right-ios7">    

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

      <ion-tab title="Menu" icon="icon ion-home" href="menu">
        <ion-nav-view name=""></ion-nav-view>
      </ion-tab>

      <ion-tab title="Products" icon="icon ion-person" href="/products">
        <ion-nav-view name="products"></ion-nav-view>
      </ion-tab>

      <ion-tab title="Settings" icon="icon ion-settings" href="/settings">
        <ion-nav-view name="settings"></ion-nav-view>
      </ion-tab>

    </ion-tabs>

</body>

检查行动here

角度（离子）状态提供者模板破坏

2 个答案: