Question

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

<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'}
      ];
})

基于控制器我在侧边菜单中创建了列表项。那是有效的。当我点击侧面菜单（更改stateprovider的时间）应用会出现"ERR_FILE_NOT_FOUND"错误。

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

Answer 1

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

templateUrl:'#/index.html'

Answer 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'}
];

Answer 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'}
      ];
})

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

它正在运作..

stateProvider没有处理离子框架

4 个答案: