Question

我一直在浏览this MEAN Stack教程，但是我已经将代码更改为使用Controller as，而不是像他们在代码中那样$scope。

我被困在启用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;
        };
});

Answer 1

您遇到的问题是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 all创建新的孩子范围，因此这些指令经常出现问题参与。

Answer 2

只需添加main.incrementUpvotes(post)代替incrementUpvotes(post)。

＆＃13;

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

＆＃13;

<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>

＆＃13;

无法从Thinkster MEAN Stack Tutorial获得提升

2 个答案: