Question

我正在使用angular 1.5.0-beta2

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

这里我定义了app和controller：

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

如何在控制器中使用角度来使用url参数？

1 个答案: