Question

我有团队列表的页面。点击我需要另一页上的标题和该团队的成员。我刚加载了列表中的团队。代码在这里：

angular.module('my-app').controller('MainController', function($scope, $http) {
    $http.get("http://...").success(function(response) {
        $scope.details = response;          
    });
});

和

<article ng-app="seed-angular">
    <section ng-controller="MainController as mc">
        <ul>
            <li ng-repeat="x in details">
                <a href="/team/team.html">{{x.name}}</a>
            </li>
        </ul>        
    </section>
</article>

Answer 1

正如Claies的评论中所提到的，您需要在应用中使用路由器。来自docs：

Angular中的应用程序路由是通过$routeProvider声明的，$route是angular-route.js服务的提供者。此服务可以轻松地将控制器，视图模板和当前URL位置连接到浏览器中。使用此功能，我们可以实施deep linking，这样我们就可以使用浏览器的历史记录（后退和前进导航）和书签。

有些库可以帮助您实现这一目标。我将使用ngRoute作为Angular.js附带的示例。

为此，您需要添加ngRoute并加载var app = angular.module('seed-angular', [ 'ngRoute' ]);模块：

$routeProvider

您还需要配置app.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/team', { templateUrl: 'team-list.html', controller: 'MainController' }). when('/team/:teamId', { templateUrl: 'team-detail.html', controller: 'TeamDetailController' }). otherwise({ redirectTo: '/team' }); } ]);来设置您的网址路径，如下所示：

/team

在上述路线中，我们已将team-list.html配置为路由到模板页面<a href="">。请注意，teamId现在传递参数<article> <section ng-controller="MainController"> <ul> <li ng-repeat="x in details"> <a href="#/team/{{x._id}}">{{x.name}}</a> </li> </ul> </section> </article>：

/team/:teamId

我们还将team-detail.html配置为路由到模板页面:teamId（请注意<article> <section ng-controller="TeamDetailController"> <a href="#/teams">Back</a> <div ng-repeat="x in details"> <strong>{{x._id}}</strong> <ul> <li> {{x.firstName}} {{x.lastName}} </li> </ul> </div> </section> </article> means it's a parameter）：

teamId

您可以通过$routeParams.teamId访问app.controller('TeamDetailController', function($scope, $http, $routeParams) { var url = "http://est-teams.estudent.hr/api/teams/" + $routeParams.teamId + "/members"; $http.get(url).success(function(response) { $scope.details = response; }); });以检索团队详细信息：

def get_uniq_person_ids
    uniq_person_ids = select('person_id').where(:state => '1').uniq
    uniq_person_ids = uniq_person_ids.map(&:person_id)
    uniq_person_ids
end

有关工作示例，请参阅此fiddle。

Answer 2

如果您想传递数据，您可以创建服务并创建存储或设置数据的函数，然后在第一个调用数据的控制器中调用它，并在下一页控制器中再次调用它，这里是代码：< / p>

这是服务：

myApp.service('sharedProperties', function() {
    var stringValue = 'test string value';
    var objectValue = {
        data: 'test object value'
    };

    return {
        getString: function() {
            return stringValue;
        },
        setString: function(value) {
            stringValue = value;
        },
        getObject: function() {
            return objectValue;
        }
    };
});

您可以在控制器中调用它：

myController.controller('UserUpdateController', ['$scope', '$http','sharedProperties',
    function($scope, $http, sharedProperties ) {
        $scope.updateUser = function() {
        .....
            id = sharedProperties.getString();


        };

    }
]);

并设置上一页的数据，如下所示：

myController.controller('UserListController', ['$scope', '$http','sharedProperties',
    function($scope, $http, sharedProperties) {


        $scope.updateUser = function(id){
            console.log("from index "+id);
            sharedProperties.setString(id);
        };


    }
]);

如何加载新页面并从api传递数据？

2 个答案: