简介
ng-transclude-slot-template 是一个 AngularJS 的指令，提供了一种重用就地元素组的方式，同时也支持插槽和多层嵌套。
安装方法
通过 npm 安装：
--- ------- --------------------------- ------
然后在需要使用的模块中引入：
------ ------------------------------
使用方法
基础使用
--------- -----
----- ---------------
------
----- ----------------
---------------------------------- ------------
------- -----------------------------------------------------------------------
------- ------------------------------------------------------------------------------------------------
-------
----- --------------------------- -- ----
--------- -----------
---- ----------------------------
--- ------------------------------
-- ---------------------------------
------
-------
--------
----------------------- --------------------------------
--------------------------- -------- -- -
---------- - ----- -- - -------
------------ - ----- -- - ---------
---
---------
-------插槽嵌套
--------- -----
----- ---------------
------
----- ----------------
---------------------------------- ------------
------- -----------------------------------------------------------------------
------- ------------------------------------------------------------------------------------------------
-------
----- --------------------------- -- ----
--------- -----------
---- ----------------------------
--- ------------------------------
---- ---------------
-- -----------------------------
-- -------------------------------
------
------
-------
--------
----------------------- --------------------------------
--------------------------- -------- -- -
---------- - ----- -- - -------
---------- - ----- -- --- ----- ---------
----------- - ----- -- --- ------ ---------
---
---------
-------动态插槽
--------- -----
----- ---------------
------
----- ----------------
---------------------------------- ------------
------- -----------------------------------------------------------------------
------- ------------------------------------------------------------------------------------------------
-------
----- --------------------------- -- ----
--------- -----------
------- ----------------------------- ----------------
---- ----------------------------
--- ------------------------------
-- -------------- -----------------------------------------
------
-------
--------
----------------------- --------------------------------
--------------------------- -------- -- -
---------------- - -----
---------- - ----- -- - -------
------------ - ----- -- - ---------
----------- - -------- -- -
---------------- - ------------------
--
---
---------
-------指令 API
ng-transclude-slot-template
选项
replace：如果设置为 true，就地元素组将被替换为由指令生成的标记。默认为 false。transcludeOnLoad：如果设置为 true，指定的内容将在组件的 $onInit 钩子函数中完成的时候处理，并使用 replace 选项。默认为 false。
插槽
slot：可选的插槽名。如果未提供，则使用默认插槽。name：用于指定插槽名的别名。
总结
ng-transclude-slot-template 提供了一种重用就地元素组的方式，支持插槽和多层嵌套，可以方便的实现组件化开发。学会并运用这个指令，可以提升前端开发的效率和代码复用率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005581e81e8991b448d54a0