$routeProvider 中的 AngularJS 调用方法答案

【问题标题】：AngularJS call method inside $routeProvider$routeProvider 中的 AngularJS 调用方法
【发布时间】：2014-06-21 10:19:16
【问题描述】：

我是 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);
};
});

我的问题是：当路由匹配时，我不知道如何调用控制器的特定方法。我需要调用方法并为其提供参数：从路由登录。如何解决这个问题？谢谢你的回答

【问题讨论】：

看看这个帖子stackoverflow.com/questions/16384134/…。您可以像这样在控制器中调用 userDetails 方法 $scope.userDetails()
@Yevgeniy.Chernobrivets ，这不是解决方案。我在控制器中有两种方法。而且我不想每次使用这个控制器时都调用 userDetails 。例如，如果我调用 createUser 方法，它会自动调用 userDetails 的东西
那么也许解决选项会对您有所帮助？ docs.angularjs.org/api/ngRoute/provider/…

标签： javascript angularjs url-routing

【解决方案1】：

如果我理解正确，您将同一控制器用于视图的两个部分（或两个视图），一个用于创建用户，另一个用于获取当前用户的详细信息。

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

无论如何，调用后端的代码不应放在控制器中，而应放在服务中。例如：

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。

【讨论】：