Javascript IONIC和angularjs：在导航组件中使用AngularUI路由器时不会发生任何事情_Javascript_Html_Angularjs_Ionic Framework_Ionic

Javascript IONIC和angularjs：在导航组件中使用AngularUI路由器时不会发生任何事情

javascript html angularjs ionic-framework

Javascript IONIC和angularjs：在导航组件中使用AngularUI路由器时不会发生任何事情,javascript,html,angularjs,ionic-framework,ionic,Javascript,Html,Angularjs,Ionic Framework,Ionic,最近，我遵循了一个关于在爱奥尼亚导航使用的说明，但是我测试了它，但没有使用，我真的找不到哪里出了问题。下面是源文件，只有两个，一个是index.html，一个是app.js。 index.js的内容： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scal

最近，我遵循了一个关于在爱奥尼亚导航使用的说明，但是我测试了它，但没有使用，我真的找不到哪里出了问题。下面是源文件，只有两个，一个是index.html，一个是app.js。 index.js的内容：

<!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></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <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-nav-bar class="bar-positive">
        <ion-nav-back-button class="button-clear">
            <i class="ion-arrow-left-c"></i> Back
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
    <script type="text/ng-template" id="todos.html">
        <ion-view title="Todos">
            <ion-content>
                <ion-list>
                    <ion-item ng-repeat="todo in todos" class="item item-icon-right" ui-sref="app.todos.detail({todo: $index})">
                        <span ng-class="{done: todo.done}">{{todo.title}}</span>
                    </ion-item>
                </ion-list>
            </ion-content>
        </ion-view>
    </script>
    <script type="text/ng-template" id="todo.html">
        <ion-content>
            <div class="item">
                <p>{{todo.title}}</p>
            </div>

            <div class="item item-checkbox">
                <div>
                    <label class="checkbox">
                        <input type="checkbox" ng-model="todo.done">
                    </label>
                    Done
                </div>

            </div>
        </ion-content>
    </script>
</body>

</html>


返回
{{todo.title}
{{todo.title}
多恩

app.js的内容

var app = angular.module('starter', ['ionic'])
app.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
})

app.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider.state('app.todos', {
        abstract: true,
        url: '/todos',
        template: '<ion-nav-view></ion-nav-view>'
    })

    $stateProvider.state('app.todos.index', {
        url: '',
        templateUrl: 'todos.html',
        controller: 'TodosCtrl'
    })

    $stateProvider.state('app.todos.detail', {
        url: '/:todo',
        templateUrl: 'todo.html',
        controller: 'TodoCtrl'
    })
})

app.factory('TodosService', function() {
    var todos = [{
        title: "Take out the trash",
        done: true
    }, {
        title: "Do laundry",
        done: false
    }, {
        title: "Start cooking dinner",
        done: false
    }]

    return {
        todos: todos,
        getTodo: function(index) {
            return todos[index]
        }
    }
})

app.controller('TodosCtrl', function($scope, TodosService) {
    $scope.todos = TodosService.todos
});

app.controller('TodoCtrl', function($scope, todo) {
    $scope.todo = todo
})

var-app=angular.module（'starter'，['ionic']））
应用程序运行（函数（$ionicPlatform）{
$ionicPlatform.ready（函数（）{
if（window.cordova&&window.cordova.plugins.Keyboard）{
插件键盘hideKeyboardAccessoryBar（真）；
}
如果（窗口状态栏）{
StatusBar.styleDefault（）；
}
});
})
app.config（函数（$stateProvider，$urlRouterProvider）{
$stateProvider.state（'app.todos'{
摘要：没错，
url:“/todos”，
模板：“”
})
$stateProvider.state（'app.todos.index'{
url:“”，
templateUrl:'todos.html'，
控制器：“TodosCtrl”
})
$stateProvider.state（'app.todos.detail'{
url:“/：待办事项”，
templateUrl:'todo.html'，
控制器：“TodoCtrl”
})
})
app.factory（'TodosService'，function（））{
var todos=[{
标题：“倒垃圾”，
完成：对
}, {
标题：“洗衣服”，
完成：错误
}, {
标题：“开始做饭”，
完成：错误
}]
返回{
待办事项：待办事项，
getTodo：函数（索引）{
返回待办事项[索引]
}
}
})
应用程序控制器（'ToDostCtrl'，函数（$scope，TodosService）{
$scope.todos=TodosService.todos
});
app.controller（'TodoCtrl'，函数（$scope，todo）{
$scope.todo=todo
})

当我在命令行中键入

爱奥尼亚服务

命令并键入url''时，我什么也看不到，但它应该看到todos.html，那么为什么会发生这种情况呢？

以下语句：

$stateProvider.state('app.todos', {

表示

todos

是

app

状态的子状态。但是您尚未配置名为

app

的状态，我从您的配置中看到，您可能希望从每个

状态中删除app.
（不要忘记ui sref
。
感谢您的帮助，它确实解决了我的问题。