无法从 Thinkster MEAN Stack 教程获得投票支持

Question

我一直在学习 this MEAN Stack 教程，但是我已经更改了我的代码以使用 Controller as 而不是像他们在代码中那样使用 $scope 。

我卡在支持投票部分。当我点击它时，它不会增加赞成票的数量，我不确定为什么会这样。

谁能帮忙解决这个问题？这是我的代码：

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;
        };
});

Answer 1

只需添加 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>

Answer 2

您遇到的问题是 ng-repeat。您需要将代码更改为 $parent.incrementUpvotes(post) 才能使其正常工作。

原因如下：ng-repeat 为每次迭代创建一个新的子作用域，但您无法完全访问您可能需要的所有内容。这是由于 angular 如何将属性复制到子范围。为了访问实际包含 incrementUpvotes 定义的范围（控制器范围），您需要先向上移动到父范围。或者你可以做 main.incrementUpvotes(post) 来完成同样的事情，因为你给控制器起了别名。

您可以在 angular 创建子范围时看到更详细的解释，以及为什么不继承某些属性 https://github.com/angular/angular.js/wiki/Understanding-Scopes

What happens is that the child scope gets its own property that hides/shadows the parent property of the same name. This is not something AngularJS is doing – this is how JavaScript prototypal inheritance works. New AngularJS developers often do not realize that ng-repeat, ng-switch, ng-view and ng-include all create new child scopes, so the problem often shows up when these directives are involved.

无法从 Thinkster MEAN Stack 教程获得投票支持

Cannot Get Upvoting to Work from Thinkster MEAN Stack Tutorial

javascript

angularjs

mean-stack