How to CSS style AngularJS directive?

前端 未结 4 2036
醉话见心
醉话见心 2021-01-31 10:26

Assuming I have a directive \"mydirect\" with a template that contains a lot of divs with a lot of nested classes. For example:

4条回答
  •  误落风尘
    2021-01-31 11:01

    Its much easier to use actual element names to create directives in your DOM rather than trying to use the class method. For two reasons: 1) its much more readable to have vs

    and 2) you can get the same ease of styling by just using the proper css syntax.

    Leave your directive just the way it is, except change it to restrict: 'EA' (docs for that here) and replace: false, as shown here:

    .directive('mydirect', function() {
        return {
            restrict: 'EA',
            replace: false,
            template: '-All that Html here-'
        };
    });
    

    Here are the options you can now use and how to configure the corresponding CSS to get the styles you want, as shown in this jsbin:

    Hope that helps.

提交回复
热议问题