javascript - $routeProvider 中的 AngularJS 调用方法

Question

我是 AngularJS 的新手。所以我有一个简单的问题，但我找不到答案。我有代码:

angular.module('app', ['app.controllers', 'ngRoute']).
config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/users', {templateUrl: '../pages/list.html', controller: 'UserListCtrl'}).
        when('/user-details/:login', {templateUrl: '../pages/form.html', controller: 'UserCtrl'  /* and here I need to call userDetails(login) from UserCtrl */}).
        otherwise({redirectTo: '/users'});;
}
]);

app.controller('UserCtrl', function ($scope, $http, $location) {
$scope.userDetails = function (login) {
    $http.get(url + login).success(function (data) {
        $scope.user = data[0];
        console.log('tst');
    }).error(errorCallback);
};

$scope.createUser = function (user) {
    $http.post(url, user).success(function (data) {
        $location.path('/users');
    }).error(errorCallback);
};
});

我的问题是:我不知道当路由匹配时如何调用 Controller 的特定方法。我需要调用方法并为其提供参数:来自路由的登录。怎么解决这个问题呢？谢谢您的解答

Answer 1

如果我理解正确，您将在 View 的两个部分(或两个 View )中重复使用相同的 Controller ，一个用于创建用户，另一个用于获取当前用户的详细信息。

由于这两个方面完全不同，因此不建议两者使用相同的 Controller 。 Controller 应该不同，并且任何通用或可重用的功能都应该通过服务共享。

无论如何，调用后端的代码不应放置在 Controller 内，而应放置在服务中。例如:

app.service('UserSrv', function ($http) {
    var url = '...';
    this.userDetails = function (login) {
        return $http.get(url + login);
    };
    this.createUser = function (user) {
        return $http.post(url, user);
    };
});

app.controller('UserCtrl', function ($scope, UserSrv) {
    var login = '...';
    var errorCallback = ...;

    // Fetch user details upon initialiation
    UserSrv.userDetails(login).success(function (data) {
        $scope.user = data[0];
    }).error(errorCallback);
});

app.controller('NewUserCtrl', function ($location, $scope, UserSrv) {
    var errorCallback = ...;

    $scope.createUser = function (user) {
        UserSrv.createUser(user).success(function (data) {
            $location.path('/users');
        }).error(errorCallback);
    };
});

<小时/>

您还可以使用 $routeProvider 的 resolve 属性“预加载”用户的详细信息并将其作为参数传递给 UserCtrl。