Javascript 如何$compile html模板并使用AJAX返回JSON数组附加到DOM（列出小部件添加项）

遇到这个难题。我想做的是如下代码：

$scope.addArtis = function(list) {
    list.forEach(function(article){
        $scope.article = article;
        var html = $compile($templateCache.get('template/articlelist/articleitem.html'))($scope);
            $element.append(html);
        });
    };
};

而模板是存储在缓存中的字符串html模板

[list]是ajax请求返回的数据，它将是一个json数组。现在，对于每个数组对象，编译不同的模板并将其附加到DOM

但是现在代码的结果是，我得到了附加到DOM中的[list.length]相同的数据（JSON数组中的最后一个对象）编译的HTML。我在想，$scope.article可能会更改为最后一个JSON数组对象，但我不知道如何处理它

---

我发现如果在HTML模板中使用ng repeat可以解决一些问题。但是，如果我只想编译single并在for循环中附加到DOM，该怎么办？

可能是这样的：

.controller('myController', function($rootScope)  {   

$scope.addArtis = function(list) {
    list.forEach(function(article){
        var scope = $rootScope.new();
        scope.article = article;
        var html = $compile($templateCache.get('template/articlelist/articleitem.html'))(scope);
            $element.append(html);
        });
    };
};
});

---

尝试使用$rootScope.new（）@samschonstal在循环中创建一个新的作用域。你能给我一些代码示例吗？谢谢sam。这样我就可以正确地运行页面了。