Проблема реализации вкладок с AngularJS с помощью stateProvider и пользовательского интерфейса

0

Привет, я создал простое приложение, которое позволяет вам создавать новую запись и видеть существующие сообщения.

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

Вот плункер с тем, как все должно выглядеть, но не работает. Http://plnkr.co/edit/3HVgE4vq8Z10HBRgzDfv?p=preview

Вот плункер, который работает (сделан кем-то другим), но не имеет следующих скриптов: http://plnkr.co/edit/dYuXfcMLe7JEg8wVoPkE?p=preview

<script type = "text/ng-template" id = "/main.html">
<div class="page-header">
  <h1>Post Center</h1>
</div>

<form id = "form" ng-submit="addForm()">
  <h3>New post</h3>

  <div class="form-group">
    <input type="text" class="form-control" ng-model="Title"></input>
  </div>

  <div class="form-group">
    <input type="text" class="form-control" ng-model="Name"></input>
  </div>

  <button type="submit" class="btn btn-primary">Add</button>
</form>

<h3>Existing posts</h3>

<div ng-repeat="post in posts">

  <span style="color: navy; font-size:15px; text-align: left; display: block;">
    <b>Title</b>:  {{post.Title}}&nbsp&nbsp
    <b>Name</b>:  {{post.Name}}&nbsp&nbsp
  </span>

  <span>
    <a href="#/posts/{{$index}}">Comments</a>
  </span>
  <br>
  <br>
</div>
  </script>

<script type="text/ng-template" id="/posts.html">
<div class="page-header">
  <h4>
    <br>
    <b>Title</b>:  {{post.Title}}
  </h4>
</div>

<div ng-repeat="comment in post.comments">
  {{comment.author}}

  <span id= "comment">
    {{comment.body}}
  </span>
</div>

<form ng-submit="addComment()">
  <h3> New Comment </h3>
  <div class = "form-group">
    <input type = "text" class = "form-control" ng-model = "body"></input>
  </div>
  <button type = "submit" class = "btn btn-primary">Add</button>
</form>
  </script>

Пожалуйста, помогите и запустите первый плункер! Спасибо!!

Теги:
angular-ui-router
angularjs-directive
tabs
uiview

1 ответ

0

Два изменения:

1) Измените ng-app="Plunker" в index.html на ng-app="app" чтобы соответствовать имени вашего модуля.

2) Отбросьте ведущие косые черты от templateUrl: '/addPost.html' до templateUrl: 'addPost.html'.

Рабочий план: http://plnkr.co/edit/cXKFWOzbwX49CHhgARzX?p=preview

  • 0
    Спасибо, но на самом деле это не работает, потому что я не могу добавлять сообщения и видеть их?
  • 0
    Вы пытались добавить соответствующие теги id в ng-templates ?
Показать ещё 2 комментария

Ещё вопросы

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