如何使用 angular 在控制器中使用 url 参数？

Question

我正在使用 angular 1.5.0-beta2

我希望能够读取参数/cocktail/:cocktail_name

这里我定义了应用程序和控制器：

var app = angular.module('myalcoholist',['ngMaterial','ngRoute']);
app.controller('CocktailController',['$scope','$http', function ($scope,$http) {
    $scope.cocktailStepsRows=null;
        $http({
            method: 'GET',
            url: 'http://api.myalcoholist.com:8888/cocktail/steps/' + $scope.cocktail_name
        }).then(function successCallback(response) {
            $scope.cocktailStepsRows=response.data;
        }, function errorCallback(response) {
            alert('error');
        });

}]);

如您所见，我正在尝试附加到 api url $scope.cocktail_name

这是我配置 ng-view 的方式：

   app.config(['$routeProvider','$locationProvider',
    function($routeProvider,$locationProvider) {
        $locationProvider.html5Mode(true);
        $routeProvider.
        when('/',{
            templateUrl: 'views/index.html',
            controller: 'IndexController'
        }).
        when('/login', {
            templateUrl: 'views/login.html',
            controller: 'LoginController'
        }).
        when('/cocktail/:cocktail_name', {
            templateUrl: 'views/cocktail.html',
            controller: 'CocktailController'
        }).
        otherwise({
            redirectTo: '/'
        });
    }]);

如您所见，我正确配置了路由以接收 cocktail_name 参数。

现在我遇到的问题是在控制器中，$scope.cocktail_name 未定义。

在打印鸡尾酒名称时的视图中

{{cocktail_name}}

我正确接收了参数。为什么不在控制器中？我错过了什么？

Answer 1

您没有将参数值复制到作用域。使用以下方法修复它：

$scope.cocktail_name = $routeParams.cocktail_name

如何使用 angular 在控制器中使用 url 参数？

how can i use url parameter in controller using angular?

angularjs

ng-view