Question

我需要动态生成链接的问题，因为链接是在ng-repeat中设置的。我想我需要在ng-repeat循环中执行自定义函数，该函数从$http获取数据并将链接推送到$scope.array。然后将href绑定到$scope.array[someIndex] ....问题我不知道是否：

这是唯一的方法
一个好的设计
如何实施

示例：

HTML

    <div ng-repeat-start="item in items">
        <a href="{{$scope.arrayOfUrls[$index]}}">the link</a> 
           // here execute $scope.getUrl(item ) somehow
    <div class="extra-div">
    <div ng-repeat-end=""></div>

控制器：

$scope.arrayOfUrls= [];

$scope.getUrl = function(url){
    $http.get(url).then(
        function(data){
           arrayOfUrls.push(data.link);

   }
)
}

如何在getUrl周期内执行ng-repeat？

PS。我无法将href直接绑定到getUrl函数，因为$http最终会导致无限的摘要循环。

此外，也可以不按顺序退回承诺，因此预期第一次调用getUrl会将链接推送到$scope.arrayOfUrls[0]是错误的假设。

更新

@Claies建议我试图预取这样的链接： 控制器执行$scope.loadFeed();

$scope.loadFeed = function() {
    http.jsonp('feed url').then(function(res) {
            $scope.feeds = res.data.responseData.feed.entries;
            $scope.feeds.forEach(function(e) {
                    // prefetch content and links for each feed
                    //hook new entryStateUrl property to feed objects
                    e['entryStateUrl'] = $scope.getEntryStateUrl(e.link); // e['entryStateUrl'] is undefined

                    })
            })



    }
}
$scope.getEntryStateUrl = function(inputUrl) {

    $http.get(inputUrl).then(function(data) {
        // do stuff
        return data.link;

    });

}

            }

现在看起来我正在尝试预取网址，但为undefined获取e['entryStateUrl'] ...

问题可能是在$ http未完成获取结果时分配范围变量...而且似乎有嵌套的promises：$http.jsonp并且在其中$http.get。

如何解决？

Answer 1

由于这需要UI增强，因此指令将是一种很好的方法。这样的指令怎么样（JSFiddle here）。请注意，我在这里调用$ window.open - 您可以将其替换为应用程序所需的任何内容。： -

    todoApp.directive('todoLinks', ['$window',function ($window) {
    var directive = {};

    directive.restrict = 'A';
    directive.transclude = 'true';
    directive.scope = { ngModel: '=ngModel', jsOnClick:'&' };
    directive.template = '<li ng-repeat="item in ngModel"><a href="javascript:void(0)" ng-click="openLink($index)">{{item.name}}</a></li>';

    directive.link = function ($scope, element, attributes) {

        $scope.openLink = function (idx) {
            $window.open($scope.ngModel[idx].link); //Replace this with what your app. requires

                if (attributes.jsOnClick) {
                    //console.log('trigger post jsOnClick');
                    $scope.jsOnClick({ 'idx': idx });
                }

        };
    };
    return directive;
}]);

当控制器填充这样的待办事项时： -

todoApp.controller("ToDoCtrl", ['$scope','$timeout','dbService',function($scope, $timeout, dbService)
{
    $scope.todo=[{"name":"google","link":"http://www.google.com"},{"name":"bing","link":"http://www.bing.com"},{"name":"altavista","link":"http://www.altavista.com"}];
}]);

该指令的使用很简单： -

<div todo-links ng-model="todo"></div>

如何使用AngularJS动态地将值绑定到链接

1 个答案: