在templateurl角传递参数的状态提供(Angular pass parameters in

2019-10-22 04:17发布

我使用的是$stateprovider从我的角度应用程序角度-UI-路由器如下:

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

在上述情况下,我们传递的id到所述控制器,我们可以将其称为ui-sref="order({id: 1234})"

但现在我想通过不使用控制器进行到后端的直接调用,并通过上面如下:

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

但很明显,我的语法是错在这里。 我如何做到这一点的情况?

Answer 1:

我创建工作示例 。 据adjsuting thiw Q&A:

试图动态地设置在控制器中的templateUrl基于恒定

让我们的模板template-A.htmltemplate-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">

检查它在这里

而且更重要的是,与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) {}
});


文章来源: Angular pass parameters in templateurl in stateprovider