2016-07-26 1 views
0

私はこのチュートリアル(https://thinkster.io/mean-stack-tutorial)に取り組んでいて、Angular Servicesを追加するとincrementUpvotesが機能しなくなり、理由を見つけることができません。私は角度サービスには非常に新しいので、私が正しくインスタンス化しているかどうか、または他の問題があるかどうかはわかりません。サービスに切り替えるときにNg-clickボタンが機能しない(Thinksterチュートリアル)

ご迷惑をおかけして申し訳ございません!

index.htmlを

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

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script> 
    <script src="app.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script> 
    <style> .glyphicon-thumbs-up { cursor:pointer } </style> 
</head> 
<body ng-app="flapperNews"> 
    <div class="row"> 
    <div class="col-md-6 col-md-offset-3"> 
     <ui-view></ui-view> 
    </div> 
    </div> 

    <script type="text/ng-template" id="/home.html"> 

    <div class="page-header"> 
     <h1>Flapper News</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> 

    </script> 
</body> 
</html> 

app.js

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

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

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

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

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

}]); 

app.controller('MainCtrl', [ 
    '$scope', 
    'posts', 
    function($scope, posts){ 
     $scope.test = 'Hello world!'; 
     $scope.posts = posts.posts; 
     $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.addPost = function() { 
      if(!$scope.title || $scope.title === '') { 
       return; 
      } 
      $scope.posts.push({ 
       title: $scope.title, 
       link: $scope.link, 
       upvotes: 0 
      }); 
      $scope.title = ''; 
      $scope.link = ''; 
     }; 
     $scope.c = function(post) { 
      post.upvotes += 1; 
     }; 
    }]); 
+1

「incrementUpVotes」関数はどこにありますか? – austinthedeveloper

答えて

0

いくつかのこと。

まず、ここであなたはすぐにそれを上書きし、あなたのサービスからデータをインポートする:

$scope.posts = posts.posts; 
    $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} 
    ]; 

しかし、あなたの直接的な質問に答えるために、あなたはあなたのng-clickので、それが機能を探しているincrementUpVotes(post)と呼ばれる機能で指摘していますあなたのコントローラーで$scope.incrementUpVotesと定義されています。あなたはその機能を書いているようですが、それを$scope.cと呼んだので、その名前を$scope.incrementUpVotesに変更すればいいはずです。

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

ありがとうございます! – DNC

関連する問題