Question

我写了2条指令＆＃34; news＆＃34;和＆＃34; newsItem＆＃34;。现在我想让路由正常工作。

此代码适用于新闻，因为不需要参数... 但不适用于带参数的新闻项目，这些项目不起作用。

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when('/news', {
            template: '<news></news>'
        })
        .when('/news/:id', {
            template: '<news-item id=' + id + '></news-item>'
        })
})

我希望它太容易了吗？我应该怎样做才能完成这项工作，而无需仅为路由目的编写控制器......

Answer 1

使用$ routeParams应该可以工作。

试试这个。

app.config(function ($routeProvider, $locationProvider, $routeParams) {
        $routeProvider
            .when('/news', {
                template: '<news></news>'
            })
            .when('/news/:id', {
                template: '<news-item id=' + $routeParams.id + '></news-item>'
            });
    });

Answer 2

您的示例不起作用，因为您的视图范围内不存在id。

建议的解决方法是添加一个控制器，将id状态参数分配给视图范围，如下所示：

app.config(function ($routeProvider) {
  $routeProvider
    .when('/news', {
      template: '<news></news>'
    })
    .when('/news/:id', {
      template: '<news-item id="{{ id }}"></news-item>',
      controller: function($scope, $routeParams){
        $scope.id = $routeParams.id;
      }
    });
});

我知道你明确要求没有控制器的方法，但在这种情况下我真的不会避免使用控制器。使用控制器是这里的方法。

Answer 3

你可以使用template函数，基本上在第一个参数中有路由参数。

<强>代码

app.config(function($routeProvider, $locationProvider) {
  $routeProvider
    .when('/news', {
    template: '<news></news>'
  })
    .when('/news/:id', {
    template: function(params) { //params will have route parameter.
      return '<news-item id=' + $routeParams.id + '></news-item>';
    }
  })
})

Angular $ routeProvider，在模板中包含参数

3 个答案: