使用stateProvider和ui-view无法使用AngularJS实现选项卡

时间:2015-06-26 05:44:04

标签: angularjs uiview angularjs-directive tabs angular-ui-router

您好我已创建了一个简单的应用程序,可让您创建新帖子并查看现有帖子。

但是我现在正在尝试使用我的应用程序。这意味着有一个单独的标签用于添加新帖子,另一个标签用于查看现有帖子。所以应该有两个标签。一个用于添加新帖子,一个用于查看现有帖子。

以下是关于如何看待但不起作用的掠夺者 http://plnkr.co/edit/3HVgE4vq8Z10HBRgzDfv?p=preview

这是一个有效的(可由其他人制作)的plunker,但没有以下脚本: 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>

请帮助并让第一个吸毒者上班!谢谢!!

1 个答案:

答案 0 :(得分:0)

两个变化:

1)将ng-app="Plunker"中的index.html更改为ng-app="app"以匹配您的模块名称。

2)将前导斜杠从templateUrl: '/addPost.html'删除到templateUrl: 'addPost.html'

工作插件:http://plnkr.co/edit/cXKFWOzbwX49CHhgARzX?p=preview