Question

我正在尝试连接angularjs和rails。按照https://thinkster.io/angular-rails#angular-routing。我无法找出为什么我的观点没有出现。我在浏览器中获得空白页面。

**My routes**
angular.module('flapperNews', ['ui.router', 'templates']).config([
'$stateProvider', '$urlRouterProvider', function($stateProvider,
   $urlRouterProvider){
   $stateProvider
      .state('home',{
        url: '/home',
        templateUrl: 'home/_home.html',
        controller: 'MainCtrl',
      resolve: {
      postPromise: ['posts', function(posts){
      return posts.getAll();
     }]
     }
      })
      .state('posts', {
        url: '/posts/{id}',
        templateUrl: 'posts/_posts.html',
        controller: 'PostsCtrl',
      resolve: {
      post: ['$stateParams', 'posts', function($stateParams, posts) {
      return posts.get($stateParams.id);
     }] 
    }
      });
 $urlRouterProvider.otherwise('home');     

 }]);

Application.html.erb page

<!DOCTYPE html>
<html>
<head>
<title>FlapperNews</title>
 <meta charset="utf-8"/>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <%= stylesheet_link_tag 'application', media: 'all' %>
  <%= javascript_include_tag 'application' %>
  <%= csrf_meta_tags %>
  </head>
  <body ng-app="flapperNews">
 <div class="row">
 <div class="col-md-6 col-md-offset-3">
  <ui-view></ui-view
 </div>
 </div>
 </body>
 </html>

 partial view
<div class="page-header">
  <h1>Flapper News</h1>
</div>

<div ng-repeat="post in posts | orderBy:'-upvotes'">
  <span class="glyphicon glyphicon-thumbs-up"
    ng-click="incrementUpvotes(post)"></span>
  {{post.upvotes}}
  <span style="font-size:20px; margin-left:10px;">
    <a ng-show="post.link" href="{{post.link}}">

      {{post.title}}
    </a>
    <span ng-hide="post.link">
      {{post.title}}
    </span>
  </span>
  <span>
  <a href="#/posts/{{post.id}}">Comments</a>
  </span>
</div>

<form ng-submit="addPost()"
  style="margin-top:30px;">
  <h3>Add a new post</h3>

  <div class="form-group">
    <input type="text"
    class="form-control"
    placeholder="Title"
    ng-model="title"></input>
  </div>
  <div class="form-group">
    <input type="text"
    class="form-control"
    placeholder="Link"
    ng-model="link"></input>
  </div>
  <button type="submit" class="btn btn-primary">Post</button>
</form>

Answer 1

请更改您的cdn路由器网址

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>

而不是

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>

Answer 2

确保解析状态的resolve部分中返回的promise。这可能是视图永远不会显示的原因。要检查这是否是问题，只需从状态中删除解析部分并尝试重新加载页面。

为什么我的视图没有以角度ui-view显示？

2 个答案: