stateProvider 不在离子框架上工作答案

【问题标题】：stateProvider is not working on ionic frameworkstateProvider 不在离子框架上工作
【发布时间】：2015-12-22 13:50:37
【问题描述】：

我有侧边菜单和主要内容部分

<body ng-app="starter" ng-controller="side-menu-ctrl">
<ion-side-menus enable-menu-with-back-views="true">

        <!-- Left menu -->
        <ion-side-menu side="left">
          <ion-header-bar class="bar-dark">
            <h1 class="title">Menus</h1>
          </ion-header-bar>
          <ion-content>
            <ion-list>
                <ion-item ng-repeat="task in tasks">
                  <a href="{{task.url}}">{{task.title}}</a>
                </ion-item>
            </ion-list>
          </ion-content>
        </ion-side-menu>

        <!-- Center content -->
        <ion-side-menu-content>
          <ion-header-bar class="bar-dark">
            <h1 class="title">Dashboard</h1>
          </ion-header-bar>
          <ion-content>
            <ion-nav-view></ion-nav-view>
          </ion-content>
        </ion-side-menu-content>


    </ion-side-menus>

我的js是

.config(function($stateProvider, $urlRouterProvider){
    $stateProvider
    .state('/index',{
        url:'/index',
        templateUrl:'#/index.html'
    })
    .state('/about',{
        url:'/about',
        templateUrl:'#/pages/about.html'
    })
    .state('/faqs',{
        url:'/faqs',
        templateUrl:'#/pages/faqs.html'
    })
    .state('/contact',{
        url:'/contact',
        templateUrl:'#/pages/contact.html'
    })

    $urlRouterProvider.otherwise('/');
})

.controller("side-menu-ctrl", function($scope,  $ionicSideMenuDelegate){
    $scope.toggleLeft = function() {
        $ionicSideMenuDelegate.toggleLeft();
      };
    $scope.tasks = [
        { title: 'Home' , url:'/home'},
        { title: 'About Us' , url:'/about'},
        { title: 'FAQs' , url:'/faqs'},
        { title: 'Contact Us' , url:'/contact'}
      ];
})

基于控制器，我在侧边菜单中创建了列表项。那是有效的。当我点击侧边菜单时（更改状态提供者的时间）应用程序给出"ERR_FILE_NOT_FOUND" 错误。

这有什么错误。 stateprovider 和 urlRouteProvider 的使用是对还是错？

【问题讨论】：

问题解决了吗？
查看我的答案
好的，所以基本上你已经完成了我让你做的事情，但是你已经创建了一个新的答案 XD。如果您接受我的回答是正确的，那就太好了。

标签： angularjs ionic-framework ionic

【解决方案1】：

删除所有这些不相关的哈希字符#

templateUrl:'#/index.html'

【讨论】：

【解决方案2】：

哈希 (#) 是 AngularJS 默认包含在您的路由中（而不是在您的文件路径中）的东西，所以 Pete 是对的，您必须从中删除 #你的 templateUrls，但你也应该添加 # 到 href 网址中。

所以你的代码应该是这样的：

//...some stuff...

$stateProvider
.state('/index',{
  url:'/index',
  templateUrl:'index.html'
})

//...some stuff...
$scope.tasks = [
  { title: 'Home' , url:'#/home'},
  { title: 'About Us' , url:'#/about'},
  { title: 'FAQs' , url:'#/faqs'},
  { title: 'Contact Us' , url:'#/contact'}
];

【讨论】：

【解决方案3】：

我将 href 更改为使用 ui.router 包中的 ui-sref，因此您可以通过简单地调用状态名称来更改 url :)

    <!-- Left menu -->
    <ion-side-menu side="left">
      <ion-header-bar class="bar-dark">
        <h1 class="title">Menus</h1>
      </ion-header-bar>
      <ion-content>
        <ion-list>
            <ion-item ng-repeat="task in tasks">
              <a ui-sref="{{task.url}}">{{task.title}}</a>
            </ion-item>
        </ion-list>
      </ion-content>
    </ion-side-menu>

    <!-- Center content -->
    <ion-side-menu-content>
      <ion-header-bar class="bar-dark">
        <h1 class="title">Dashboard</h1>
      </ion-header-bar>
      <ion-content>
        <ion-nav-view></ion-nav-view>
      </ion-content>
    </ion-side-menu-content>


</ion-side-menus>

templateUrl 应该指向您的模板位置，而且我不认为州名应该包含任何斜杠

.config(function($stateProvider, $urlRouterProvider){
    $stateProvider
    .state('index',{
        url:'/index',
        templateUrl:'/index.html'
    })
    .state('about',{
        url:'/about',
        templateUrl:'/pages/about.html'
    })
    .state('faqs',{
        url:'/faqs',
        templateUrl:'/pages/faqs.html'
    })
    .state('contact',{
        url:'/contact',
        templateUrl:'/pages/contact.html'
    })

    $urlRouterProvider.otherwise('/index');
})

.controller("side-menu-ctrl", function($scope,  $ionicSideMenuDelegate){
    $scope.toggleLeft = function() {
        $ionicSideMenuDelegate.toggleLeft();
      };
    $scope.tasks = [
        { title: 'Home' , url:'index'},
        { title: 'About Us' , url:'about'},
        { title: 'FAQs' , url:'faqs'},
        { title: 'Contact Us' , url:'contact'}
      ];
})

【讨论】：

【解决方案4】：

我在网址中添加了#

.controller("side-menu-ctrl", function($scope,  $ionicSideMenuDelegate){
    $scope.toggleLeft = function() {
        $ionicSideMenuDelegate.toggleLeft();
      };
    $scope.tasks = [
        { title: 'Dashboard' , url:'#/dashboard'},
        { title: 'About Us' , url:'#/about'},
        { title: 'FAQs' , url:'#/faqs'},
        { title: 'Contact Us' , url:'#/contact'}
      ];
})

从 templateUrl 中移除 #

.state('dashboard',{
        url:'/dashboard',
        views:{
            'menuContent':{
                templateUrl:'pages/dashboard.html'
            }
        }

    })
    .state('about',{
        url:'/about',
        views:{
            'menuContent':{
                templateUrl:'pages/about.html'
            }
        }
    })

它正在工作..

【讨论】：