Question

我无法在代码中看到 feedster 练习中的任何错误（来自 Codecademy 中的课程），如果有人能发现它应该很棒。谢谢你的帮助。保罗

这是我的代码：

指令：

app.directive('feedsterPost', function() {
    return {
        restrict: 'E',
        scope: {
            post: '='
        },
        templateUrl: 'js/directives/feedsterPost.html'
    };
});

HTML中的指令：

<img class="avatar" ng-src="{{ post.author.avatar }}" />
<h3 class="author-name">{{ post.author.name }} </h3>
<p class="comment-text">{{ post.comment.text }} </p>
<img class="comment-img" ng-src="{{ post.comment.img }}" />

控制器：

app.controller('PostController', ['$scope', function($scope) {
    $scope.posts = [
        {
            author: {
                name: 'Calvin Broadus, Jr.',
                avatar: 'img/cbj.svg'
            },
            comment: {
                img: 'img/dog.jpg',
                text: 'How much for that dogg in the window?'
            }
        },
        {
            author: {
                name: 'Matthew Healy',
                avatar: 'img/mh.svg'
            },
            comment: {
                text: 'I used to have a recurring dream when I was younger.'
            }
        }
    ];  
}]);

索引：

<!doctype html>
<html>
  <head>
    <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700" rel="stylesheet" type="text/css">
    <link href="css/main.css" rel="stylesheet">

    <script src="js/vendor/angular.min.js"></script>
  </head>
  <body ng-app="FeedsterApp">

    <div class="header">
      <div class="container">
        <div class="row">
          <div class="col-md-2">
            <h1>feedster</h1>
          </div>
        </div>
      </div>
    </div>

    <div class="posts" ng-controller= "PostController">
      <div class="container">

        <div class="post" ng-repeat="post in posts">
         <feedster-post post="post"></feedster-post>
        </div>

      </div>
    </div>


    <!-- Modules -->
    <script src="js/app.js"></script>

    <!-- Controllers -->
    <script src="js/controllers/PostController.js"></script>

    <!-- Directives -->
     <script src="js/controllers/feedsterPost.js"></script>


  </body>
</html>

在给定提示后更新

<div class="post" ng-repeat="post in posts">
    <feedster-post post="post">{{ post }}</feedster-post>
</div>

这就是现在在帖子字段中显示的内容：

{  
   "author":{  
      "name":"Calvin Broadus, Jr.",
      "avatar":"img/cbj.svg"
   },
   "comment":{  
      "img":"img/dog.jpg",
      "text":"How much for that dogg in the window?"
   }
}

{  
   "author":{  
      "name":"Matthew Healy",
      "avatar":"img/mh.svg"
   },
   "comment":{  
      "text":"I used to have a recurring dream when I was younger."
   }
}

即使代码正确，Angular应用程序也会显示空帖

0 个答案: