stateprovider中templateurl中的角度传递参数答案

【问题标题】：Angular pass parameters in templateurl in stateproviderstateprovider中templateurl中的角度传递参数
【发布时间】：2018-02-03 19:36:26
【问题描述】：

我在我的 Angular 应用程序中使用来自 angular-ui-router 的$stateprovider 如下：

.state('order', {
        url: "/order/:id",
        templateUrl: "/myapp/order"
    })

在上述场景中，我们将id 传递给控制器，我们可以将其称为ui-sref="order({id: 1234})"。

但现在我想通过不使用控制器直接调用后端，并按如下方式传递上述内容：

.state('order', {
        url: "/order",
        templateUrl: "/myapp/order/:id"
    })

但显然我的语法在这里是错误的。我如何实现这种情况？

【问题讨论】：

或许看看templateProvider？我不确定您所说的直接调用后端是什么意思。
我在后端有 django，它根据我正在调用的 url 呈现部分模板。如果我直接调用 url，则会呈现模板。这个 url 有一个渲染模板的 django 视图。所以我试图在不使用控制器的情况下直接在 stateprovider 中调用这个 url
既然您可以访问 $stateParams，并且您使用 id 对您的模板进行 http 请求，那么模板提供者不是要走的路吗？
你能帮我解决这个问题吗？我正在尝试这样的事情： .state('order', { url: "/irms/order/:id", templateProvider: function ($http, orderService, $stateParams) { return orderService.getUrl($stateParams.id) .then(function(url) { return $http.get(url); }) } })
试试？模板提供者：函数（$timeout，$stateParams，$http）{ var url = '/myapp/order/' + $stateParams.id; return $timeout(function () { return $http.get(url).then(function(html){ return html.data; })}, 100); }]

标签： angularjs angular-ui-router

【解决方案1】：

我created working example。它正在调整问答：

Trying to Dynamically set a templateUrl in controller based on constant

让我们在示例中使用模板template-A.html 和template-B.html。 templateProvider 的状态定义如下所示

  $stateProvider
    .state('order', {
      url: '/order/:id',

      templateProvider: function($http, $templateCache, $stateParams) {

        var id = $stateParams.id || 'A';
        var templateName = 'template-' + id + '.html';

        var tpl = $templateCache.get(templateName);

        if (tpl) {
          return tpl;
        }

        return $http
          .get(templateName)
          .then(function(response) {
            tpl = response.data
            $templateCache.put(templateName, tpl);
            return tpl;
          });
      },
      controller: function($state) {}
    });

现在我们可以这样称呼它

  <a href="#/order/A">
  <a href="#/order/B">

查看here

更重要的是，使用最新版本的 angularjs，我们甚至可以让它变得超级简单：

$templateRequest

更新plunker

.state('order', {
  url: '/order/:id',

  templateProvider: function($templateRequest, $stateParams) {

    var id = $stateParams.id || 'A';
    var templateName = 'template-' + id + '.html';
    return $templateRequest(templateName);
  },
  controller: function($state) {}
});

【讨论】：