angular中directive的资源竞争

柔情只为你懂 2022-03-30 08:49 188阅读 0赞

directive的资源竞争问题发生在父元素同时包含多个directive的场景下，下面直接上代码（angular版本为1.4.6）：

index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="node_modules/angular/angular.js"></script>
        <script type="text/javascript" src="index.js"></script>
    </head>
    <body ng-app="app">
    <div dir-a dir-b></div>
    </body>
    </html>

index.js

运行页面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxbHFscTAwNw_size_16_color_FFFFFF_t_70]

此时页面可以正常工作，两个directive运行互不干扰，这也表示directive内link执行的动作没有资源竞争问题。

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

接下来为directive加上html模版：

index.js调整为：

运行页面报错如下（错误信息：Multiple directives \[dirA, dirB\] asking for template）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxbHFscTAwNw_size_16_color_FFFFFF_t_70 1]

错误提示并不容易理解，但实际上就是说多个directive声明的html模版冲突，angular无法判断该使用哪一个。在上例中去掉任意一个directive的template就不会报错，也就说如果父元素同时包含多个directive，那么只能有一个directive可以声明template或templateUrl。

另外我还补充验证了一下2个dieective声明的template完全相同时的情况，结果仍然会报错，这说明angular不会检查模版内容，只要这样声明就会报错。

接下来去掉模块，加上作用域：

index.html调整为（父元素增加了option-a和option-b两个属性）：

index.js调整为：

运行页面报错如下（错误信息：Multiple directives \[dirA, dirB\] asking for new/isolated scope）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxbHFscTAwNw_size_16_color_FFFFFF_t_70 2]

错误提示字面含义为多个directive需要作用域隔离，实际上就是说多个directive声明的作用域冲突，angular无法判断该使用哪一个。同样去掉任意一个directive的scope就不会报错，也就说如果父元素同时包含多个directive，那么只能有一个directive可以声明scope。

故我们可以推论出父元素下的多个directive的html模块和作用域都是共用的，在父元素同时包含多个directive这种场景下声明和使用directive都需要注意这一点，避免directive由于资源竞争导致页面运行出错。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxbHFscTAwNw_size_16_color_FFFFFF_t_70]: /images/20220330/79a3275c2baf4bdc833c1b69bbc480fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxbHFscTAwNw_size_16_color_FFFFFF_t_70 1]: /images/20220330/919aba5c3d3a47c381ecf237b483ea12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxbHFscTAwNw_size_16_color_FFFFFF_t_70 2]: /images/20220330/7daca89e1c4a43c096d4eea0c00e2401.png