控制器多次返回值

Question

我正在使用 AngularJS 为 <iframe> 插入 src 属性。

但出于某种原因，每当我调用 grab 这个值时，它都会返回多次。我知道这一点是因为在解决方案工作之前我正在检查使用 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

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

Answer 2

解决额外函数调用的一种潜在方法是绑定到一个简单值，在您的例子中是 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() 才能获得 link。如果有办法将其值绑定到 src，则可以在每个 $digest 周期简单地检查它。

控制器多次返回值

Controller returning value multiple times

angularjs

angularjs-controller

更新

控制器

HTML