Question

我正在关注tutorial并试图将材料应用到我在rails中开始的上一个项目。

这是我的main.js：

'use strict';

angular.module('outpostApp').config(function ($stateProvider) {
  $stateProvider.state('main', {
    url: '/',
    templateUrl: 'app/partials/posts.html',
    controller: 'MainCtrl'
  }).state('newPost', {
    url: '/submit',
    templateUrl: 'app/partials/post-add.html',
    controller: 'CreatePostController'
  });
}).run(function($state) {
    $state.go('main');
});

这是我的posts.html：

<div ng-include="'components/navbar/navbar.html'"></div>
<a ui-sref="newPost" class="btn-primary btn-lg nodecoration">Add New Post</a>

这是我的post-add.html：

<form class="form-horizontal" role="form" ng-submit="addPost()">
  <div ng-include src="'partials/_form.html'"></div>
</form>

我正在使用相同的_form.html进行一些修改：

<div class="form-group">
  <label for="title" class="col-sm-2 control-label">Title</label>
  <div class="col-sm-10">
    <input type="text" ng-model="post.title" class="form-control" id="title" placeholder=""/>
  </div>
</div>
<div class="form-group">
  <label for="message" class="col-sm-2 control-label">Message</label>
  <div class="col-sm-10">
    <input type="text" ng-model="post.message" class="form-control" id="message" placeholder=""/>
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <input type="submit" class="btn btn-primary" value="Save"/>
  </div>
</div>

只是想知道为什么在点击“添加新帖子”按钮后表单无法加载。我得到一个大空屏幕。我的_form.html位于client / app / partials / _form.html下。我不确定它是否与文件路径有关。

由于

Answer 1

根据w3schools文档，ng-include应该接收文件的路径，而不是使用属性src。所以，而不是

<div ng-include src="'partials/_form.html'"></div>

你应该做同样的事情

<div ng-include="'components/navbar/navbar.html'"></div>

因此

<div ng-include="'partials/_form.html'"></div>

我建议您始终打开浏览器网络并验证是否正在请求您需要的文件，这样您就可以了解应用程序中发生的情况并更容易解决问题。

聚苯乙烯。我不确定您的路径，但通过检查您的控制台，您应该能够验证是否正在请求该文件并将其设置到正确的位置。

了解更多信息：

http://www.w3schools.com/angular/angular_includes.asp

部分表单HTML未加载

1 个答案: