Angular 指令 templateUrl 相对于 .js 文件的路径问题-JavaScript中文网-JavaScript教程资源分享门户

在使用 Angular 框架开发前端应用时，我们常常需要编写自定义指令来实现一些特定的功能。其中，templateUrl 属性是指令模板文件的路径，它可以是绝对路径或相对路径。本文将介绍如何正确处理 templateUrl 相对于 .js 文件的路径问题。

相对路径的问题

在编写自定义指令时，我们通常会将指令的逻辑代码和模板文件分别存放在不同的文件中，比如：

|-- app/
|   |-- directives/
|       |-- myDirective.js
|       |-- myDirective.html

此时，我们需要在 myDirective.js 中通过 templateUrl 属性指定模板文件的路径，比如：

angular.module('myApp').directive('myDirective', function() {
  return {
    restrict: 'E',
    templateUrl: 'directives/myDirective.html',
    // ...
  };
});

这里的路径 'directives/myDirective.html' 是相对于当前页面的路径，而不是相对于 myDirective.js 的路径。如果我们在不同的页面中使用该指令，就会导致路径错误，无法加载模板文件。

解决方案

为了解决这个问题，我们可以使用 $location 服务获取当前页面的 URL，并根据它计算出模板文件的相对路径。具体步骤如下：

在指令中注入 $location 服务：

angular.module('myApp').directive('myDirective', ['$location', function($location) {
  // ...
}]);

获取当前页面的 URL：
```
var baseUrl = $location.absUrl();
```

根据当前页面的 URL 和模板文件的相对路径计算出模板文件的完整路径：

var templatePath = baseUrl.substring(0, baseUrl.lastIndexOf('/')) + '/directives/myDirective.html';

将完整路径赋给 templateUrl 属性即可：

return {
  restrict: 'E',
  templateUrl: templatePath,
  // ...
};

完整代码如下：

-- -------------------- ---- -------
------------------------------------------------ ------------- ------------------- -
  --- ------- - -------------------
  --- ------------ - -------------------- ------------------------- - -------------------------------

  ------ -
    --------- ----
    ------------ -------------
    -- ---
  --
----

示例代码

假设我们有一个指令 myDirective，它的逻辑代码和模板文件分别存放在 app/directives/myDirective.js 和 app/directives/myDirective.html 中。我们可以按照上述步骤编写指令代码：

-- -------------------- ---- -------
------------------------------------------------ ------------- ------------------- -
  --- ------- - -------------------
  --- ------------ - -------------------- ------------------------- - -------------------------------

  ------ -
    --------- ----
    ------------ -------------
    ----- --------------- -------- ------ -
      -- ---
    -
  --
----

然后，在页面中使用该指令：

-- -------------------- ---- -------
--------- -----
----- ---------------
  ------
    ----- ----------------
    --------- -----------
  -------
  ------
    -----------------------------

    ------- --------------------------
    ------- ---------------------------------------------
  -------
-------

注意，这里需要先加载 angular.js 和 myDirective.js，再在页面中使用 my-directive 元素。

总结

正确处理 templateUrl 相对于 .js 文件的路径问题，可以避免在不同页面中使用自定义指令时出现路径错误的情况。我们可以使用 $location 服务获取当前页面的 URL，并根据它

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/25157