在AngularJS中,使用ng-include
指令可以将外部HTML文件包含到当前页面中。通常情况下,我们使用如下语法:
----------- ---------------------------------------
其中,src
属性是一个字符串值,用于指定要包含的HTML文件的路径。但是,有时候我们需要动态地改变包含的文件路径,这时就需要使用变量作为src
属性的值。
使用变量作为ng-include
的src
要使用变量作为ng-include
的src
属性值,可以直接在变量前加上双引号,像这样:
----------- ----------------------------------
其中,{{filename}}
是一个AngularJS表达式,它会被求值为一个字符串,然后作为src
属性的值。注意,在这个表达式外面还需要加上一层单引号,因为src
属性的值必须是一个字符串。
在控制器中动态改变src
要在控制器中动态地改变ng-include
的src
属性值,可以通过改变绑定到filename
变量上的值来实现。例如,假设我们有一个控制器:
----------------------- --- --------------------------- ---------------- - --------------- - ----------------------- ---
在模板中,我们可以这样使用ng-include
指令:
---- ----------------------------- ----------- ---------------------------------- ------
这样,初始时ng-include
会包含path/to/default.html
文件。如果要改变包含的文件路径,只需要在控制器中修改filename
变量的值即可:
--------------- - ---------------------
这样ng-include
就会自动更新,包含path/to/other.html
文件。
示例代码
下面是一个完整的示例代码,演示了如何使用变量作为ng-include
的src
属性值,并且在控制器中动态地改变包含的文件路径:
--------- ----- ----- --------------- ------ ----- ---------------- ----------------- ---- - -------- --- ----------- ------- ------------------------------------------------------------------------------------ -------- ----------------------- --- --------------------------- ---------------- - --------------- - --------------- ----------------- - ---------- - -- ---------------- --- --------------- - --------------- - ------------- - ---- - --------------- - --------------- - -- --- --------- ------- ----- ----------------------------- -------------- ---- - -------- --- -------- --- ------- ----- ------------------------- ------- ------------------------------ ------------- ---- ---- ----------- ---------------------------------- ------- -------
这个示例中,初始时ng-include
包含default.html
文件。点击"Switch file"按钮后,控制器会将filename
变量的值从default.html
改为other.html
,然后ng-include
会自动更新,包含other.html
文件。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/31702