Question

这是我的控制器页面

.controller('ActorController',function($scope,$q,$http) {

   $scope.showActors = false;
   var POPULAR_PERSON = 'person/popular';

    var actors = [];
    for(var i=1;i<=10;i++){
        actors.push($http.get(URL + POPULAR_PERSON + APIKEY + PAGE + i))
    }
    $q.all(actors).then(
        function (response) {
            $scope.actors = response[0].data.results;
            $scope.showActors = true;

            for(var j = 1; j < response.length; j++) {
                $scope.actors = $scope.actors.concat(response[j].data.results);
            }
        },
        function(response) {
            $scope.message = "Error: "+response.status + " " + response.statusText;
        }
    )

    $scope.getActorDetails = function(id){
        var actorDetails = $http.get(URL + "person/" + id + APIKEY);
        actorDetails.then(
            function(response){
                console.log(response.data.biography);
                $scope.actorDetails = response.data.biography;
            }
        )
    }
})

get请求都正常工作。该控制器获取actor信息，函数getActorDetails（）使用id获取特定actor的传记。

这是我的HTML页面

<div ng-controller="ActorController">
<div class="actors-list row-content">
    <div class="col-xs-12" ng-if="!showActors">
        <h1>{{message}}</h1>
    </div>
<ul class="actors-list media-list">
    <li class="media" dir-paginate="actor in actors | itemsPerPage:5">
        <div class="col-sm-2">
            <div class="media-left media-middle">
                <a>
                    <img class="media-object img-responsive"
                         ng-src="http://image.tmdb.org/t/p/w500{{actor.profile_path}}" width=180 height=300 alt="{{actor.name}}">
                </a>
            </div>
        </div>
        <div class="col-sm-10">
            <div class="media-body">
                <h2 class="media-heading"><a class="movie-title">{{actor.name}}</a></h2>
<span> TO BE INSERTED <span>
            </div>
        </div>
    </li>

    <dir-pagination-controls
            max-size="10"
            direction-links="true"
            boundary-links="true">
    </dir-pagination-controls>
</ul>

如何在＆＃34;待插入＆＃34;中插入函数getActorDetails（）;这样我就可以获得特定演员的演员细节。

P.S：要传递的函数getActorDetails（actor.id）。一旦页面加载就应该调用该函数。如何在不单击任何按钮的情况下调用函数。

Answer 1

您可以尝试ng-init：

<span ng-init="getActorDetails(actor.id)"> TO BE INSERTED <span>

但您应该将详细信息存储在地图中：

$scope.actorDetails = {};//declare this at the beginning of your controller

然后在getActorDetails中：

$scope.getActorDetails = function(actor){
    var actorDetails = $http.get(URL + "person/" + actor.id + APIKEY);
    actorDetails.then(
        function(response){
            console.log(response.data.biography);
            $scope.actorDetails[id] = response.data.biography;//stored in a map
        }
    )
}

span

<span ng-init="getActorDetails(actor.id)"> <!-- display data binded to actorDetails[actor.id] --> <span>

另一种方法是获取每个actor的数据并将其存储到actor中，但是因为你正在使用页面我猜这会很糟糕：

for(var j = 1; j < response.length; j++) {
    $scope.actors = $scope.actors.concat(response[j].data.results);
}
angular.forEach($scope.actors, function(actor){
    $scope.getActorDetails(actor);
});

$scope.getActorDetails = function(actor){
    var actorDetails = $http.get(URL + "person/" + actor.id + APIKEY);
    actorDetails.then(
        function(response){
            console.log(response.data.biography);
            $scope.actorDetails = response.data.biography;
        }
    )
}

要在页面加载时调用函数，我通常使用：

angular.element(document).ready(function(){
    //stuff
});

或者如果我使用组件（因为角度为1.5），我使用$onInit：

.controller('ActorController',function($q,$http) {
    var ctrl = this;

    ctrl.$onInit = function(){
        //stuff
    }
});

请注意，使用此方法时，不应绑定到$scope，而应绑定到ctrl。

这里有一个组件：

.component('actorDetails', {
    bindings: {
        id: '<'
    },
    template: 'yourTemplate',
    controller: ['$http', function ($http) {
        var ctrl = this;

        var URL = 'yourURL';
        var APIKEY = 'yourAPIKEY';

        ctrl.$onInit = function () {
            var actorDetails = $http.get(URL + "person/" + ctrl.id + APIKEY);
            actorDetails.then(
                    function (response) {
                        console.log(response.data.biography);
                        ctrl.actorDetails = response.data.biography;
                    }
            );
        };
    }]
});

和html，而不是：

<span> TO BE INSERTED <span>

调用您的组件：

<actor-details id="actor.id"></actor-details>

Answer 2

从getActors调用的成功回调中调用getActorDetails方法，并将详细信息存储在actors对象本身中。

.controller('ActorController', function($scope, $q, $http) {
    $scope.showActors = false;
    var POPULAR_PERSON = 'person/popular';

    var actors = [];
    for (var i = 1; i <= 10; i++) {
        actors.push($http.get(URL + POPULAR_PERSON + APIKEY + PAGE + i))
    }
    $q.all(actors).then(
        function(response) {
            $scope.actors = response[0].data.results;
            $scope.showActors = true;

            for (var j = 1; j < response.length; j++) {
                $scope.actors = $scope.actors.concat(response[j].data.results);
            }
            angular.forEach($scope.actors, function(actor) {
                getActorDetails(actor.id).then(function() { // resolve promise here and assign the value to $scope.actor object.
                    actor.actorDetails = response.data;
                })
            });
        },
        function(response) {
            $scope.message = "Error: " + response.status + " " + response.statusText;
        }
    )

    var getActorDetails = function(id) {
        var actorDetails = $http.get(URL + "person/" + id + APIKEY);
        actorDetails.then(function(response) {
            console.log(response.data.biography);
        });
        return actorDetails; // return promise here
    }
})

在HTML上绑定此actorDetails对象。

<div ng-controller="ActorController">
<div class="actors-list row-content">
    <div class="col-xs-12" ng-if="!showActors">
        <h1>{{message}}</h1>
    </div>
<ul class="actors-list media-list">
    <li class="media" dir-paginate="actor in actors | itemsPerPage:5">
        <div class="col-sm-2">
            <div class="media-left media-middle">
                <a>
                    <img class="media-object img-responsive"
                         ng-src="http://image.tmdb.org/t/p/w500{{actor.profile_path}}" width=180 height=300 alt="{{actor.name}}">
                </a>
            </div>
        </div>
        <div class="col-sm-10">
            <div class="media-body">
                <h2 class="media-heading"><a class="movie-title">{{actor.name}}</a></h2>
<span> {{actor.actorDetail.biography}} <span>
</div>
        </div>
    </li>

    <dir-pagination-controls
            max-size="10"
            direction-links="true"
            boundary-links="true">
    </dir-pagination-controls>
</ul>

从作用域中删除getActorDetails方法。此外，您还可以在$scope.actors对象

中获取演员详细信息以供将来使用

在init上调用get请求

2 个答案: