частичная форма HTML не загружается

0

Я следую учебнику и пытаюсь применить материал к предыдущему проекту, который я начал в рельсах.

Это мой 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>

Просто интересно, почему форма не будет загружаться после того, как я нажму кнопку "Добавить новую почту". Я получаю большой пустой экран. My _form.html находится в файле client/app/partials/_form.html. Я не уверен, что это что-то с файловым путем.

благодаря

1 ответ

0

Согласно документации 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>

Я рекомендую вам всегда открывать свою сеть браузера и проверять, нужен ли вам необходимый файл, таким образом, вы понимаете, что происходит в вашем приложении, и его легче решить проблему.

Ps. Я не уверен в ваших путях, но, проверив вашу консоль, вы сможете проверить, запрашивается ли файл, и установить его в нужное место.

Чтобы получить больше информации:

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

  • 0
    Благодарю. Я попробовал это, и это все еще пусто :( Я должен буду продолжать пытаться. Это немного глупо, но вы можете сказать мне, как использовать консоль для проверки? Она не показывает никаких ошибок.
  • 0
    Если вы используете Google Chrome, щелкните правой кнопкой мыши где-нибудь -> Проверка элемента. На вкладках вы увидите Сеть, щелкните по ней и проверьте все файлы, которые запрашиваются. Я надеюсь, что это помогает. Ps. Если вы много работаете с веб-разработкой, я настоятельно рекомендую вам изучить варианты, которые дает браузер (просто дружеский совет: D)
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню