带有 $this 的单个页面上的 Angular js 多个控制器

Question

我在单个页面上有两个控制器。出于某种原因，一次只有其中一个工作。那就是如果我评论较低的div。然后上一个工作，反之亦然。

index.html

<div ng-controller="MessageController as ctrl">

{{ctrl.messages}}

</div>
<div ng-controller="CommentController as ctrl">

{{ctrl.comments}}

</div>

app.js

var app = angular.module('plunker', []);

var prefix = 'http://jsonplaceholder.typicode.com';
app.controller('MessageController', ['$http', function ($http) {

$this = this;
$http.get(prefix + '/posts/1').success(function (response) {
        $this.messages = response;
        return response;
    });
}]);

app.controller('CommentController', ['$http', '$scope', function ($http) {
    $this = this;
    $http.get(prefix + '/posts/2').success(function (response) {
        $this.comments = response;
        return response;
    });

}]);

这里是采摘者http://plnkr.co/edit/BXzj9GeP88BQeIA3UTWN?p=preview

Answer 1

您的问题是 $this 泄漏到全局范围内。如果您在声明前加上 var 关键字，它将驻留在每个控制器构造函数的词法范围内。

app.controller('CommentController', ['$http', '$scope', function ($http) {
    var $this = this;
    $http.get(prefix + '/posts/2').success(function (response) {
        $this.comments = response;
        return response;
    });

}]);