Question

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

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

这是我的index.html：

<!DOCTYPE html>
<html lang = "en">

  <head>
    <meta charset = "utf-8">
    <title>App</title>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!--External Javascript, uses Angular 1.3+ Framework-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="post.js"></script>
  </head>
  <!-- 
  Body
  -->
  <body ng-app="app" ng-controller="MainCtrl">
    <div class="row">
  <div class="col-md-10 col-md-offset-1">
    <ui-view></ui-view>
  </div>
</div>

<!-- 
For angular routing
Home/Main page 
-->
<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>

  <!-- 
  Comments on a particular post
   -->
  <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>
  </body>
</html>

这是我的post.js文件：

var app = angular.module('app', ['ui.router']);

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
// Angular Routing
$stateProvider.state('main', {
    url: '/main',
    templateUrl: '/main.html',
    controller: 'MainCtrl'
}).state('posts', {
    url: '/posts/{id}',
    templateUrl: '/posts.html',
    controller: 'PostCtrl'
});

$urlRouterProvider.otherwise('main');

}]);

app.factory('posts', [function(){
var o = {
    posts: [
        {Title: "Example post 1", Name: 'Bobby', comments: []},
        {Title: "Example post 2", Name: 'Jason', comments: []},
        {Title: "Example post 3", Name: 'Newton', comments: []},
      ]
};
return o;
}]);

app.controller('MainCtrl', ['$scope', 'posts', function($scope, posts){

  $scope.posts = posts.posts;

  // To add new post
  $scope.addForm = function() {
    $scope.posts.push({
    Title: $scope.Title, 
    Name: $scope.Name,
    comments: []
  });

// After adding new post, set the fields to blank again
$scope.Title = '';
$scope.Name = '';
 };
}]);

app.controller('PostCtrl', ['$scope', '$stateParams', 'posts', function($scope, $stateParams, posts){

$scope.post = posts.posts[$stateParams.id];

// To add new comment to post
$scope.addComment = function(){
    if ($scope.body === ''){
        return;
    };

    $scope.post.comments.push({
        body: $scope.body,
        author: 'Person',
    });

    $scope.body = '';
}
}]);

我尝试过很多不同的选择但没有取得好成绩。例如，我尝试使用tabset（因为我的main.html在标签中不起作用），窗格，甚至常规导航栏（不起作用，因为导航会弄乱ui-router。

请帮我解决这个难题！谢谢!!

Answer 1

如果您可以将ui-bootstrap添加到项目中，那么您可以轻松地将其与uirouter一起使用。

这是使用嵌套路线的标签示例。请注意，所有嵌套路由都从主路径的控制器继承，如模板中所示。

在控制器范围内配置路由：

$scope.tabs = [
  { title:'Posts', route: 'home.posts' },
  { title:'addPost', route: 'home.addPost' }
];

$scope.go = function(route) {
  $state.go(route);
};

stateProvider：

$stateProvider.state('home', {
    url: '/home',
    templateUrl: 'home.html',
    controller: 'homeCtrl'
}).state('home.posts', {
    url: 'home/posts/{id}',
    templateUrl: 'posts.html'
}).state('home.addPost', {
    url: 'home/addPost',
    templateUrl: 'addPost.html'
});

$urlRouterProvider.otherwise('home');

的index.html：

<tabset>
  <tab ng-repeat="tab in tabs" select="go(tab.route)" ui-sref-active="tab.active" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
    <ui-view></ui-view>
  </tab>
</tabset>

http://plnkr.co/edit/dYuXfcMLe7JEg8wVoPkE?p=preview

如何使用AngularJS stateProvider和ui-view实现选项卡？

1 个答案: