在自定义指令的模板中将类添加到html标记中

鳄鱼

定义自定义指令时,链接和编译函数都将“元素”作为自变量,这对于向其添加类非常方便。但是,如果指令是'Element'指令,并且'replace'字段设置为false(为避免使用此折旧字段),则compile和link函数中的element参数是原始指令的element(<some-widget>),而不是template(<div>)中的元素,因此浏览器将忽略所有添加的类。

问题:将类动态添加到模板中的HTML标记的最佳实践是什么?(我显然可以将类作为字符串插入,但是感觉很脏)

angular.module('app', [])
    .directive('someWidget', function () {
        return {
            restrict: 'E',
            replace: false,
            template: '<div>This is the template</div>',
            link: function (scope, element) {
                element.addClass("orange");
            }
        };
    });

生成的HTML将如下所示:

<some-widget class="orange">
    <!-- The orange class is ignored-->
   <div>This is the template</div>
<some-widget>
AB

在将replace设置为false时,将类添加到指令中会将它们添加到指令中,这与在div上应用几乎相同

如果您在指令<some-widget class="orange red">设置了将被替换为的属性,但属性将像<div class="orange red">This is the template</div>

实际上发生的是,原始DOM节点的所有属性都与模板的根节点中的属性合并

工作示例请参见控制台进行验证

 angular.module('app', [])
        .directive('someWidget', function () {
            return {
                restrict: 'E',
                replace: true,
                template: '<div>This is the template</div>',
                link: function (scope, element) {
                 
                  
                }
            };
        });
.orange{color:red;}
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <div ng-app="app">
    <some-widget class="orange red">
       
       
    </some-widget>
      </div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在Zend Framework 2中将自定义HTML添加到<head>标记

来自分类Dev

在Zend Framework 2中将自定义HTML添加到<head>标记

来自分类Dev

在MVC 4中将自定义类添加到DropDownList

来自分类Dev

在MVC 4中将自定义类添加到DropDownList

来自分类Dev

如何在Android Studio中将ImageView添加到自定义视图类中?

来自分类Dev

在Wordpress中将自定义CSS添加到页面模板

来自分类Dev

如何使用辅助函数将自定义类名称添加到Handlebars模板中的元素?

来自分类Dev

自定义图像以添加到地图标记

来自分类Dev

将自定义HTML标记添加到Ghost或Ghost主题

来自分类Dev

将自定义页脚添加到页面模板

来自分类Dev

如何将自定义属性添加到传单0.7.7标记中?

来自分类Dev

如何将自定义属性添加到传单0.7.7标记中?

来自分类Dev

如何在Python 3.5中将自定义代码添加到HTTPStatus?

来自分类Dev

在WooCommerce中将自定义结帐字段值添加到客户订单注释中

来自分类Dev

在Windows Phone 8.1中将自定义按钮添加到AppBarButton

来自分类Dev

如何在Woocommerce中将自定义字段添加到类别中?

来自分类Dev

如何在Java中将自定义颜色添加到数组中?

来自分类Dev

如何在swift2中将分钟添加到自定义时间

来自分类Dev

将自定义函数添加到类

来自分类Dev

将自定义类添加到引导按钮

来自分类Dev

将自定义类添加到引导按钮

来自分类Dev

将子视图添加到自定义类

来自分类Dev

将自定义类添加到jstree

来自分类Dev

将自定义方法添加到JButton类

来自分类Dev

AngularJS指令中自定义HTML标记的后果

来自分类Dev

使用jQuery将自定义CSS类添加到动态创建的元素中

来自分类Dev

将自定义类添加到ASP.NET MVC 4中的单选按钮

来自分类Dev

将自定义属性添加到更新模型时丢失的.tt POCO类中

来自分类Dev

将新项目添加到自定义类的 Observable 集合中

Related 相关文章

  1. 1

    在Zend Framework 2中将自定义HTML添加到<head>标记

  2. 2

    在Zend Framework 2中将自定义HTML添加到<head>标记

  3. 3

    在MVC 4中将自定义类添加到DropDownList

  4. 4

    在MVC 4中将自定义类添加到DropDownList

  5. 5

    如何在Android Studio中将ImageView添加到自定义视图类中?

  6. 6

    在Wordpress中将自定义CSS添加到页面模板

  7. 7

    如何使用辅助函数将自定义类名称添加到Handlebars模板中的元素?

  8. 8

    自定义图像以添加到地图标记

  9. 9

    将自定义HTML标记添加到Ghost或Ghost主题

  10. 10

    将自定义页脚添加到页面模板

  11. 11

    如何将自定义属性添加到传单0.7.7标记中?

  12. 12

    如何将自定义属性添加到传单0.7.7标记中?

  13. 13

    如何在Python 3.5中将自定义代码添加到HTTPStatus?

  14. 14

    在WooCommerce中将自定义结帐字段值添加到客户订单注释中

  15. 15

    在Windows Phone 8.1中将自定义按钮添加到AppBarButton

  16. 16

    如何在Woocommerce中将自定义字段添加到类别中?

  17. 17

    如何在Java中将自定义颜色添加到数组中?

  18. 18

    如何在swift2中将分钟添加到自定义时间

  19. 19

    将自定义函数添加到类

  20. 20

    将自定义类添加到引导按钮

  21. 21

    将自定义类添加到引导按钮

  22. 22

    将子视图添加到自定义类

  23. 23

    将自定义类添加到jstree

  24. 24

    将自定义方法添加到JButton类

  25. 25

    AngularJS指令中自定义HTML标记的后果

  26. 26

    使用jQuery将自定义CSS类添加到动态创建的元素中

  27. 27

    将自定义类添加到ASP.NET MVC 4中的单选按钮

  28. 28

    将自定义属性添加到更新模型时丢失的.tt POCO类中

  29. 29

    将新项目添加到自定义类的 Observable 集合中

热门标签

归档