AngularJS $scope 对比这个

Question

我是 AngularJS 的初学者，我有一个问题要问。
我调用 rest api 通过博客 ID 获取评论，如下所示：

_getAllCommentsByBlogId(1, _convertComments);

function _getAllCommentsByBlogId(blogId, callback) {
    $http({
        method : "GET",
        url : "/api/v1/blogs/" + blogId + "/comments"
    }).then(function(res) {
        // success
        callback(res.data);

    }, function(res) {
        // error
        console.log("Error: " + res.status + " : " + res.data);
    });
}

响应数据转换为查看任务，如下所示：

function _convertComments(response) {
    $scope.comments = convert(response);
}

function convert(array) {
    var map = {};
    for (var i = 0; i < array.length; i++) {
        var obj = array[i];
        obj.children = [];
        map[obj.id] = obj;
        var parent = obj.parentId;

        if (!map[parent]) {
            map[parent] = {
                children : []
            };
        }
        map[parent].children.push(obj);
    }

    return map['0'].children;
}

转换后可以看到如下：

<div id="commentsApp"
  class="response-area"
  ng-app="commentsApp"
  ng-controller="CommentsController as c"
>
  <h2>3 RESPONSES</h2>

  <div>
    <script id="comments.template" type="text/ng-template">
      <div class="comment">
        {{comment.username}}
        <div ng-if="comment.showReply">
            <div class="form-group">
                <textarea autofocus class="form-control" row="3" ng-focus="c.showReply" ng-model="c.newComment.description"></textarea>
            </div>
            <div class="form-group">
                <button class="btn btn-danger" ng-click="c.reply(comment)">reply</button>
                <button class="btn btn-danger" ng-click="comment.showReply=false">cancel</button>
            </div>
        </div>
        <ng-include src="'comments.template'" ng-repeat="comment in comment.children"></ng-include>
      </div>
    </script>
    <ng-include
      src="'comments.template'"
      ng-repeat="comment in comments"
    ></ng-include>
  </div>
</div>

我尝试更改视图中的以下部分

<ng-include
  src="'comments.template'"
  ng-repeat="comment in comments"
></ng-include>

进入

<ng-include
  src="'comments.template'"
  ng-repeat="comment in c.comments"
></ng-include>

和 js 中的以下部分

function _convertComments(response) {
    $scope.comments = convert(response);
}

进入

function _convertComments(response) {
    this.comments = convert(response);    
}

然后视图不显示任何内容。我已经以这种方式工作，一切似乎都按预期工作。你能解释一下吗？

我也看过'this' vs $scope in AngularJS controllers，但是我的英文不太好看不懂。谢谢

Answer 1

当您在控制器的某个函数中使用 this 时，它会创建自己的上下文，因此它的作用域不同于实际上是 $scope 的外部作用域。

所以，最好的使用方法是，在控制器的顶部（控制器代码的开始）定义 var vm = this; 然后在你之前实际使用 $scope 的任何地方使用 vm .这样你就不会遇到你现在面临的问题。（顺便说一句，在控制器级别范围内，您仍然可以使用 this）例如

var vm = this;
...
function _convertComments(response) {
    vm.comments = convert(response)
}

Plunker 示例

查看这些简单的解释：article1 , article2

AngularJS $scope 对比这个

AngularJS $scope vs this

api

rest

scope

this

angularjs