您好，我为我的应用程序创建了一个嵌套 View 表单。
效果很好...但是我决定向表单添加更多页面以扩展其功能(6 个表单页面存储在 partials/formname.html 等中。
表单不会出现。这只是一个空白区域。只有标题/导航栏有效。
我觉得问题在于 script.js。控制台似乎没有抛出任何错误。我花了一整天的时间试图弄清楚为什么它不会运行，我真的需要一些帮助。谢谢
这是我的傻瓜: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";
}
]);
最佳答案
您的状态未解析的原因是您的模板 url 路径在您尝试引用的文件中不正确。 templateUrl 的每个值都必须是包含部分文件的实际路径。在您的示例中，您的 View 所在的目录下没有名为 partials/ 的目录。它们与您的其余文件位于同一目录中。
如果您从 templateUrl 中删除 'partials/'，则状态将解析。
在查看您的代码后的一些其他建议和想法:
在您的顶级表单 Controller 中，您正在重定向到一个名为
.profile的子状态，该状态不存在，因此会引发错误。在
$state.go()中使用相对状态可能会在用户使用前进或后退按钮操作状态时导致问题。使用完整的状态名称(例如'form.goal'而不是'.goal'将防止出现这种情况。您正在通过尝试路由到
'/home'为home状态设置重定向；但是，为了默认为home状态，您必须传入 home 状态的 url，即'/'。请查看我对您的 plunk 所做的更改，以获取下面的工作示例。最后，作为一个建议，
ui.router包含一个名为uiSrefActive的指令，您可以将其与uiSref结合使用在导航元素上设置事件类。更多信息请点击此处:https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref-active
关于javascript - Angularjs 表单问题。表格不可见，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27695538/