在使用 Angular 框架开发前端应用时，我们常常需要编写自定义指令来实现一些特定的功能。其中，templateUrl 属性是指令模板文件的路径，它可以是绝对路径或相对路径。本文将介绍如何正确处理 templateUrl 相对于 .js 文件的路径问题。
相对路径的问题
在编写自定义指令时，我们通常会将指令的逻辑代码和模板文件分别存放在不同的文件中，比如：
--- ---- - --- ----------- - --- -------------- - --- ----------------
此时，我们需要在 myDirective.js 中通过 templateUrl 属性指定模板文件的路径，比如：
------------------------------------------------ ---------- -
------ -
--------- ----
------------ ------------------------------
-- ---
--
---这里的路径 'directives/myDirective.html' 是相对于当前页面的路径，而不是相对于 myDirective.js 的路径。如果我们在不同的页面中使用该指令，就会导致路径错误，无法加载模板文件。
解决方案
为了解决这个问题，我们可以使用 $location 服务获取当前页面的 URL，并根据它计算出模板文件的相对路径。具体步骤如下：
在指令中注入
$location服务：------------------------------------------------ ------------- ------------------- - -- --- ----
获取当前页面的 URL：
--- ------- - -------------------
根据当前页面的 URL 和模板文件的相对路径计算出模板文件的完整路径：
--- ------------ - -------------------- ------------------------- - -------------------------------
将完整路径赋给
templateUrl属性即可：------ - --------- ---- ------------ ------------- -- --- --
完整代码如下：
------------------------------------------------ ------------- ------------------- -
--- ------- - -------------------
--- ------------ - -------------------- ------------------------- - -------------------------------
------ -
--------- ----
------------ -------------
-- ---
--
----示例代码
假设我们有一个指令 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