Question

我的问题简而言之

如何操纵我的控制器内的ng-repeat创建的隔离范围？

要阅读完整的问题，我将继续阅读以下内容：

我有一个关于时间轴的集合，每个集合都有一系列捕获（基本上是图像）。

HTML

<ul>
    <li ng-repeat="timeline in timelines | filter:search | orderBy:'event_date':sort">
        <ul ng-if="timeline.captures">
            <li ng-repeat="captures in timeline.captures | limitTo:imageLimit">
                <img ng-src="<% captures.capture_location %>">
            </li>
        </ul>
        <a ng-click="(imageLimit = imageLimit + 1)">Load more</a>
    </li>
</ul>

我想限制页面加载时加载的图片数量..我可以使用limitTo
我想在用户点击“加载更多”时加载更多图片。我也可以通过ng-click="(imageLimit = imageLimit + 1)

我想做什么：

我想把它作为一个函数提取出来

so that the following
<a href="#" ng-click="(imageLimit = imageLimit + 1)">Load more</a>
becomes 
<a href="#" ng-click="loadMore()">Load more</a>

为实现这一目标，我尝试了以下方法：

在我的控制器内

$scope.imageLimit = 1; // number of images to show initially on page load

$scope.loadMore = function() {
    $scope.imageLimit += 1;
};

现在发生的事情是，这不会在重复范围内创建imageLimit模型（如果您理解我的意思），而是在控制器范围内创建imageLimit模型。这也是预期的行为，但我想知道如何在我的控制器内的重复时间线（该时间线的隔离范围）内操作范围？

Answer 1

如果我理解正确，您希望每个时间轴都能loadMore()，与其他时间轴无关。因此loadMore()函数应该将时间轴作为参数，并且限制应该是时间轴的属性：

angular.forEach($scope.timelines, function(timeline) {
    timeline.imageLimit = 10; // default value
});

$scope.loadMore(timeline) {
    timeline.imageLimit++;
}

在你的模板中：

<li ng-repeat="captures in timeline.captures | limitTo:timeline.imageLimit">
...
<a ng-click="loadMore(timeline)">Load more</a>

角度范围和ng重复

1 个答案: