從Thinkster MEAN堆棧無法啓動工作教程

我一直在經歷this MEAN堆棧教程，但是我已經將代碼更改爲使用Controller as而不是像他們的代碼那樣使用$scope。從Thinkster MEAN堆棧無法啓動工作教程

我卡在啓用upvotes部分。當我點擊它並不會增加upvotes的數量，我不知道爲什麼會發生這種情況。

任何人都可以幫助解決這個問題嗎？這裏是我的代碼：

的index.html

<html> 
    <head> 
     <title>My Angular App!</title> 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script> 
     <script src="app.js"></script> 
    </head> 
    <body ng-app="flapperNews" ng-controller="MainCtrl as main"> 
     <div ng-repeat="post in main.posts | orderBy: '-upvotes'"> 
      <span ng-click="incrementUpvotes(post)">^</span> 
      {{ post.title }} - upvotes: {{ post.upvotes }} 
     </div> 
     <form ng-submit="main.addPost()"> 
      <input type="text" ng-model="main.title"></input> 
      <button type="submit">Add Post</button> 
     </form> 
    </body> 
</html>

app.js

/*global angular*/ 
/*jslint white:true*/ 
angular 
    .module('flapperNews', []) 
    .controller('MainCtrl', function(){ 
     'use strict'; 
     var main = this; 

     main.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} 
     ]; 

     main.addPost = function(){ 
      if(!main.title || main.title === '') {return;} 
      main.posts.push({title: main.title, upvotes: 0}); 
      main.title = ''; 
     }; 

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

來源

2016-07-28 Tythyrn

您遇到的問題是與ng-repeat。您需要將代碼更改爲$parent.incrementUpvotes(post)才能完成此項工作。

原因如下：ng-repeat爲每次迭代創建一個新的子作用域，但是您沒有完全訪問您可能需要的所有內容。這是由於角度如何將屬性複製到子範圍中。爲了訪問實際包含incrementUpvotes（控制器作用域）定義的作用域，您需要首先向上移動到父作用域。或者，你可能可以做main.incrementUpvotes(post)來完成同樣的事情，因爲你是別名控制器。

你可以看到，當角創建一個子範圍內發生了什麼，以及爲什麼某些屬性在這裏沒有繼承https://github.com/angular/angular.js/wiki/Understanding-Scopes

什麼情況是，孩子範圍都有自己的財產更詳細的解釋，即皮/陰影同名的父屬性。這不是 AngularJS正在做的事 - 這是JavaScript原型繼承的工作原理。新的AngularJS開發人員通常不會意識到ng-repeat，ng-switch，ng-view和ng-include都會創建新的子範圍，所以當涉及這些指令時，這些問題通常會顯示出來。

來源

2016-07-28 20:05:54 Joel

只需添加main.incrementUpvotes(post)而不是incrementUpvotes(post)。

angular 
 
    .module('flapperNews', []) 
 
    .controller('MainCtrl', function(){ 
 
     'use strict'; 
 
     var main = this; 
 

 
     main.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} 
 
     ]; 
 

 
     main.addPost = function(){ 
 
      if(!main.title || main.title === '') {return;} 
 
      main.posts.push({title: main.title, upvotes: 0}); 
 
      main.title = ''; 
 
     }; 
 

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

<html> 
 
    <head> 
 
     <title>My Angular App!</title> 
 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script> 
 
     <script src="app.js"></script> 
 
    </head> 
 
    <body ng-app="flapperNews" ng-controller="MainCtrl as main"> 
 
     <div ng-repeat="post in main.posts | orderBy: '-upvotes'"> 
 
      <span ng-click="main.incrementUpvotes(post)">^</span> 
 
      {{ post.title }} - upvotes: {{ post.upvotes }} 
 
     </div> 
 
     <form ng-submit="main.addPost()"> 
 
      <input type="text" ng-model="main.title"></input> 
 
      <button type="submit">Add Post</button> 
 
     </form> 
 
    </body> 
 
</html>

來源

2016-07-28 20:04:23 fodma1

從Thinkster MEAN堆棧無法啓動工作教程

回答

相關問題