Question

来自https://github.com/angular-ui/ui-router/wiki

templateUrl 也可以是返回网址的函数。它需要一个预设参数stateParams，它不会被注入。

$stateProvider.state('contacts', {
  templateUrl: function ($stateParams){
    return '/partials/contacts.' + $stateParams.filterBy + '.html';
  }
})

在templateURL中返回函数有什么好处？对不起，如果这有点模糊。我试图完全绕过ui-router。

Answer 1

开发者指南在the directive section

中有一个很好的例子

主要思想是你可以动态地＆＃34;选择最适合当前实例的模板：

angular.module('docsTemplateUrlDirective', [])
  .controller('Controller', ['$scope', function($scope) {
    $scope.customer = {
      name: 'Naomi',
      address: '1600 Amphitheatre'
    };
  }])
  .directive('myCustomer', function() {
    return {
      templateUrl: function(elem, attr){
        return 'customer-'+attr.type+'.html';
      }
    };
  });

正如您可能想象的那样，使用此功能，您可以通过在这种情况下分配名为type的属性来配置最终模板URL：

<div ng-controller="Controller">
  <div my-customer type="name"></div>
  <div my-customer type="address"></div>
</div>

在ui-router场景中，您可以访问状态参数，但想法是一样的。

Answer 2

A＆＃34;福利＆＃34;这可能是一种奇怪的方式。它为路由器添加了一种方法，可以动态决定用于给定路由的模板，具体取决于$stateParams。实现类似功能的另一种方法是在路由的单个模板中使用ngIf或ngSwitch。

我认为您使用哪一个可能取决于您自己的偏好/您认为良好的编码实践对于手头的任务。如果我有两个完全不同的长模板，我可能会将该函数用于动态模板URL。如果我有简短或非常相似的模板，那么我可能会使用ngIf。

此外，我现在已经使用过几次ui-router，到目前为止从未使用过templateUrl这个函数。

在templateURL中返回函数有什么好处？

2 个答案: