控制器多次返回值

Question

我使用AngularJS为src插入<iframe> atturbute。

出于某种原因，每当我调用抓住这个值时，它会多次返回。我知道这是因为我在使解决方案正常工作之前使用console.log(src)进行调试。

这个小故障似乎没有造成任何错误（或减慢我的申请速度），但我很想知道发生了什么？

更新

我通过将大部分工作转移到自定义recentStations服务（如果需要，可用）来减少控制器中的代码。

HTML视图中的结果仍然相同，返回多个结果的行为也是如此。

控制器

app.controller('contentCtrl', ['$scope', 'recentStations', function($scope, recentStations){

    $scope.getCurrentSrc = function(){
        return recentStations.getCurrentSrc();
    };

}]);

HTML

<div id="content" data-ng-controller="contentCtrl">
    <iframe data-ng-src="{{ getCurrentSrc() }}" seamless></iframe>
</div>

Answer 1

解决其他函数调用的一种可能方法是绑定一个简单的值，在您的情况下为src，并在依赖值上使用$watch来重建它。

以下是您的控制器的示例：

$scope.$watch(getLink, buildSource);

function getLink(){
    return recentStations.getCurrent().link;
}

function buildSource(link){
    var url = 'http://iris2.rail.co.uk/tiger/';
    var src = url + link;

    $scope.src = $sce.trustAsResourceUrl(src);
};

HTML将绑定如下：

<iframe data-ng-src="{{ src }}" seamless></iframe>

然而，你仍然在每个$ digest做一个（较小的）函数调用;现在它是每次调用的getLink函数。这是因为您似乎必须致电recentStations.getCurrent()才能获取链接。如果有一种方法可以将其值绑定到src，则可以简单地检查每个$ digest周期。

Answer 2

此行为是由angularjs脏检查引起的。 AngularJS实现了对双向数据绑定的脏检查。