【发布时间】：2014-12-30 05:42:02
【问题描述】：
您好，我为我的应用创建了一个嵌套视图表单。
效果很好...但是我决定向表单添加更多页面以扩展其功能（6 个表单页面存储在 partials/formname.html 等中。
表格不会出现。这只是一个空白区域。只是标题/导航栏有效。
我觉得问题出在 script.js 上。控制台似乎没有抛出任何错误。我花了一整天的时间试图弄清楚它为什么不能运行，我真的可以得到一些帮助。谢谢
这是我的 plunker：enter link description here
这里是 index.html
<!DOCTYPE html>
<html ng-app="financeApp">
<head>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-router@0.2.10" data-semver="0.2.10" src="https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js"></script>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller = "demoCtrl">
<ul class="nav nav-pills pull-right">
<li ng-class="{active: isState('home') }">
<a ui-sref="home">Home</a>
</li>
<li ng-class="{active: isState('form') }">
<a ui-sref="form">Form</a>
</li>
<li ng-class="{active: isState('contact') }">
<a ui-sref="contact">Contact</a>
</li>
</ul>
<h3 class="text-muted">Demo Page</h3>
<br>
<div ui-view=""></div>
</body>
</html>
和 script.js
var financeApp = angular.module('financeApp', [
'ui.router' ])
.config(['$urlRouterProvider', '$stateProvider',
function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'partials/home.html',
controller: 'homeCtrl'
})
.state('form', {
url: '/form',
templateUrl: 'partials/form.html',
controller: 'formCtrl'
})
//note the following are form's child states
.state('form.goal', {
url: '/goal',
templateUrl: 'partials/formGoal.html',
controller: 'formGoalCtrl'
})
.state('form.goalamount', {
url: '/goalamount',
templateUrl: 'partials/formGoalamount.html',
controller: 'formGoalamountCtrl'
})
.state('form.risk', {
url: '/risk',
templateUrl: 'partials/formRisk.html',
controller: 'formRiskCtrl'
})
.state('form.invest', {
url: '/invest',
templateUrl: 'partials/formInvest.html',
controller: 'formInvestCtrl'
})
.state('form.fund', {
url: '/fund',
templateUrl: 'partials/formFund.html',
controller: 'formFundCtrl'
})
.state('form.account', {
url: '/account',
templateUrl: 'partials/formAccount.html',
controller: 'formAccountCtrl'
})
//contact state
.state('contact', {
url: '/contact',
templateUrl: 'partials/contact.html',
controller: 'contactCtrl'
});
}
])
financeApp.controller('demoCtrl', ['$scope', '$state', '$location',
function($scope, $state, $location) {
$scope.isState = function(states) {
return $state.includes(states);
};
}
])
.controller('homeCtrl', ['$scope',
'$state',
function($scope, $state) {} ]) .controller('formCtrl', ['$scope',
'$state',
function($scope, $state) {
//This is to go to one of the child state of formCtrl. Here I choose
//it to go to profile state first.
//optionally you can use parent property or "abstract = true".
//or you can use $urlRedirect service.
$state.go('.profile');
}
]) .controller('formGoalCtrl', ['$scope', '$state',
function($scope, $state) {
//just a simple function to go to the next state using $state.go()
$scope.goToNextState = function(nextState){
$state.go(nextState);
}
}
]) .controller('formGoalamountCtrl', ['$scope', '$state',
function($scope, $state) {
$scope.goToNextState = function(nextState){
$state.go(nextState);
}
}
]) .controller('formRiskCtrl', ['$scope', '$state',
function($scope, $state) {
$scope.goToNextState = function(nextState){
$state.go(nextState);
}
}
]) .controller('formInvestCtrl', ['$scope', '$state',
function($scope, $state) {
$scope.goToNextState = function(nextState){
$state.go(nextState);
}
}
]) .controller('formFundCtrl', ['$scope', '$state',
function($scope, $state) {
$scope.goToNextState = function(nextState){
$state.go(nextState);
}
}
]) .controller('formAccountCtrl', ['$scope', '$state',
function($scope, $state) {
$scope.finished = function(){
alert('Form Completed!')
}
}
]) .controller('contactCtrl', ['$scope', '$state',
function($scope, $state) {
$scope.contact_str = "This is a string from contactctrl";
}
]);
【问题讨论】：
-
如果您单击 plunker 中的选项卡，您会在控制台中收到错误，还有很多 undefined is not a function 消息记录...
-
但是这些错误大部分都在 angular.js CDN 代码中？我的代码看不到任何错误？
标签： javascript html css angularjs forms