Question

这是我的代码：的 controller.js

angular.module('myApp',['ui.router'])

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  // route to show all the polls
  .state('polls', {
    url: '/polls',
    templateUrl: 'views/polls.html',
    controller: 'pollsController'
  })
  // show new polls
  .state('new', {
    url: '/polls/add',
    templateUrl: 'views/newPoll.html',
    controller: 'newController'
  });
  $urlRouterProvider.otherwise('/polls');
})

.controller('pollsController', function($scope,$http) {
  $http.get('/polls').then(function(data, status, headers, config) {
    $scope.result = data;
  }).catch(function(data) {

    $scope.result = data;
  });
})
.controller('newController',function($scope,$http) {
  $http.get('/polls/add').then(function(data,status,headers,config) {
    $scope.result = data;
  }).catch(function(data) {
    $scope.result = data;
  });
});

的index.html

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8">
  <!-- <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/darkly/bootstrap.min.css"> -->
  <link rel="stylesheet" type="text/css" href="views/css/style.css">

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
  <script type="text/javascript" src="controller.js"></script>
</head>
<body ng-app="myApp">
  <div id="topheader">
    <h1>myApp</h1>
  </div>
  <div class="topnav" id="topnavigation">
    <a ui-sref-active="active" ui-sref="new">Add poll</a>
    <a ui-sref-active="active" ui-sref="polls">All polls</a>
  </div>

  <div class="container">
    <div ui-view></div>
  </div>
</body>
</html>

polls.html

<div class="content">
    <h2>View your polls!</h2>
  <div class="allPolls" ng-repeat="item in result.data.polls">
    <li> {{item.title}}
    </li>
  </div>
</div>

newPoll.html

<div class="content">
  <form>
    Title: <br><input type="text" name="title"><br>
    Options (add line break between options): <br>
    <textarea type="text" name="options">
    </textarea>
    <br>
    <button type="button">Create new poll</button>
  </form>
</div>

所以现在当我按下民意调查页面中的“添加民意调查”按钮时，页面会加载一个只有topnavigation-bar的页面。当我再次按“添加民意调查”按钮时，页面将从newPoll.html加载表单。第一次点击时网址会发生变化，所以一切都应该在第一次点击时工作？

UI视图：加载网址但不加载内容

0 个答案: