Question

- 请在我的OP底部看我的编辑 - 请看我的傻瓜here

我正在通过位于here.

的演练来学习AngularJS

我正在进行标题为“伪造评论数据”的步骤。我已经在我的float.js文件中构建了几个模型和一个服务，但是有些东西一定是错的，因为我看不到任何包含我刚刚添加的假数据的帖子。需要修复什么才能让我按照我的教程看到这些假数据？

这是float.js：

angular.module('FLOAT', ['ui.router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: '/home.html',
      controller: 'MainCtrl'
    });

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

  $urlRouterProvider.otherwise('home');
}])

angular.module('FLOAT', [])
.factory('posts', [function(){
  var o = {
    posts: []
  };
  return o;
}])

angular.module('FLOAT', [])
  .controller('MainCtrl', [
'$scope',
'posts',
function($scope, posts){
        $scope.test = 'Hello world!';


      // We are inside a controller here:
        $scope.posts = [{
        title: 'post 1',
        upvotes: 5
      }, {
        title: 'post 2',
        upvotes: 2
      }, {
        title: 'post 3',
        upvotes: 15
      }, {
        title: 'post 4',
        upvotes: 9
      }, {
        title: 'post 5',
        upvotes: 4
      }];

        $scope.posts = posts.posts;

        $scope.addPost = function(){
          if(!$scope.title || $scope.title === '') { return; }
          $scope.posts.push({
              title: $scope.title,
              link: $scope.link,
              upvotes: 0,
              comments: [
                {author: 'Joe', body: 'Cool post!', upvotes: 0},
                {author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
              ]
            });
          $scope.title = '';
          $scope.link = '';
        };

        $scope.incrementUpvotes = function(post) {
          post.upvotes += 1;
        };

    }

  ]);

  angular.module('FLOAT', [])
  .controller('PostsCtrl', [
'$scope',
'$stateParams',
'posts',
function($scope, $stateParams, posts){

}]);

这是我的index.html文件：

<html>
  <head>
    <title>FLOAT</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="float.js"></script>
    <style> .glyphicon-thumbs-up { cursor:pointer } </style>
  </head>

  <script type="text/ng-template" id="/home.html">
  <div class="page-header">
    <h1>FLOAT</h1>
  </div>

  <!-- rest of template -->
  </script>

  <body ng-app="FLOAT">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <ui-view></ui-view>
    </div>
  </div>

      <div class="page-header">
        <h1>FLOAT</h1>
      </div>

      <div ng-repeat="post in posts | orderBy:'-upvotes'">
        <span class="glyphicon glyphicon-thumbs-up"
          ng-click="incrementUpvotes(post)"></span>
        {{post.upvotes}}
        <span style="font-size:20px; margin-left:10px;">
          <a ng-show="post.link" href="{{post.link}}">
            {{post.title}}
          </a>
          <span ng-hide="post.link">
            {{post.title}}
          </span>
        </span>
      </div>

      <form ng-submit="addPost()"
        style="margin-top:30px;">
        <h3>Add a new post</h3>

        <div class="form-group">
          <input type="text"
            class="form-control"
            placeholder="Title"
            ng-model="title"></input>
        </div>
        <div class="form-group">
          <input type="text"
          class="form-control"
          placeholder="Link"
          ng-model="link"></input>
        </div>
        <button type="submit" class="btn btn-primary">Post</button>
      </form>

    </div>
  </div>
</body>
</html>

编辑：

好的，根据这两个答案，我把所有内容放在一个主模块中，一个ui.router modile;但现在{{post.upvotes}} {{post.title}} {{post.title}}都错误地绑定到我的视图。代码显示而不是评估）

以下是已编辑的FLOAT.js文件：

// ui-router module
angular.module('FLOAT', ['ui.router'])

.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: '/home.html',
      controller: 'MainCtrl'
    });

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

  $urlRouterProvider.otherwise('home');
}]);

// main module
angular.module('FLOAT', [])

.factory('posts', [function(){
  var o = {
    posts: []
  };
  return o;
}])

.controller('MainCtrl', [
'$scope',
'posts',
function($scope, posts){
        $scope.test = 'Hello world!';


      // We are inside a controller here:
        // $scope.posts = [{
        // title: 'post 1',
        // upvotes: 5
      // }, {
        // title: 'post 2',
        // upvotes: 2
      // }, {
        // title: 'post 3',
        // upvotes: 15
      // }, {
        // title: 'post 4',
        // upvotes: 9
      // }, {
        // title: 'post 5',
        // upvotes: 4
      // }];

        $scope.posts = posts.posts;

        $scope.addPost = function(){
          if(!$scope.title || $scope.title === '') { return; }
          $scope.posts.push({
              title: $scope.title,
              link: $scope.link,
              upvotes: 0,
              comments: [
                {author: 'Joe', body: 'Cool post!', upvotes: 0},
                {author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
              ]
            });
          $scope.title = '';
          $scope.link = '';
        };

        $scope.incrementUpvotes = function(post) {
          post.upvotes += 1;
        };
}])

.controller('PostsCtrl', [
'$scope',
'$stateParams',
'posts',
function($scope, $stateParams, posts){
}]);

Answer 1

修改：以下是您正在使用的plnkr：http://plnkr.co/edit/2DJcgERl2j2JgoduU56H?p=preview 有几个结构上的变化，但大多数都是有效的。最大的问题是你没有使用任何控制器。我添加了ng-controller="MainCtrl"

此代码正在创建3次新模型。您需要访问它，而不是创建。

用于创建：

angular.module('FLOAT', [])

要进行访问，您可以使用：

angular.module('FLOAT').controller(..)

如果您将所有内容都放在一个文件中，则可以使用

angular.module('FLOAT',[]) //create
.controller( .. ) //access
.factory( .. ); //access

Answer 2

您有几个问题，包括重新声明模块和覆盖数据。

模块声明（仅执行一次）包括依赖关系数组参数。之后，模块引用getter不包含第二个参数

在控制器中，您创建了一个$scope.posts数组，但在此之后您重新分配$scope.posts = posts.posts;

这会消除您之前在$scope.posts

中所拥有的内容

一个简单的解决方法是将所有新数据移至帖子工厂中的o.posts数组，然后只设置$scope.posts = posts.posts;

假评论不会出现帖子对象：

2 个答案: