blocks|key|208602|text|我认为这个问题的解决方案很简单。但这只是一种猜测。您可以使用以下命令定义该指令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|208603|<div+class="mydirect></div>|code-block|syntax|javascript|208604|在您的指令定义中，您使用：|208605|restrict:+'E'|208606|该指令不是由Angularjs呈现的，因为Angularjs正在寻找类似于：|208607|<mydirect></mydirect>|208608|只需将restrict:+'E'更改为restrict:+'C'。|offset|length|style|CODE|208609|entityMap^0|0|0|0|0|0|0|3|D|J|D|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|12|8|@$Q|13|R|14|S|T]|$Q|15|R|16|S|T]]|9|@]|A|$]]|$1|U|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|V|$]]

<p>I think the solution to this is simple. But its only a guess.
You define the directive by using:</p>

<pre><code>&lt;div class="mydirect&gt;&lt;/div&gt;
</code></pre>

<p>and in your directive definition you use:</p>

<pre><code>restrict: 'E'
</code></pre>

<p>The directive is not rendered by Angularjs because Angularjs is looking for something like:</p>

<pre><code>&lt;mydirect&gt;&lt;/mydirect&gt;
</code></pre>

<p>Simply change <code>restrict: 'E'</code> to <code>restrict: 'C'</code>.</p>


blocks|key|4714791|text|使用实际的元素名称在DOM中创建指令要比尝试使用class方法容易得多。出于两个原因:+1)使用<mydirect>比使用<div+class="mydirect">更具可读性；2)只需使用正确的css语法，您就可以获得同样轻松的样式。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4714792|保持您的指令不变，除非将其更改为restrict:+'EA'+(该here的文档)和replace:+false，如下所示：|4714793|.directive('mydirect',+function()+{
++++return+{
++++++++restrict:+'EA',
++++++++replace:+false,
++++++++template:+'-All+that+Html+here-'
++++};
});|code-block|syntax|javascript|4714794|下面是您现在可以使用的选项，以及如何配置相应的CSS以获得所需的样式，如this+jsbin中所示|4714795|​|4714796|📷|atomic|4714797|4714798|希望这能有所帮助。|4714799|entityMap|0|LINK|mutability|MUTABLE|url|https://docs.angularjs.org/guide/directive#template-expanding-directive|1|http://jsbin.com/xeqicuqalu/edit?html,css,output|2|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/d95604e12f872d09b7322ffd0243c96a.png|imageAlt^0|1C|A|1P|M|0|G|E|16|E|X|4|0|0|0|10|A|1|0|0|0|1|2|0|0|0^^$0|@$1|2|3|4|5|6|7|1C|8|@$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1H|8|@$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]]|D|@$9|1M|A|1N|1|1O]]|E|$]]|$1|H|3|I|5|J|7|1P|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1Q|8|@]|D|@$9|1R|A|1S|1|1T]]|E|$]]|$1|O|3|P|5|6|7|1U|8|@]|D|@]|E|$]]|$1|Q|3|R|5|S|7|1V|8|@]|D|@$9|1W|A|1X|1|1Y]]|E|$]]|$1|T|3|P|5|6|7|1Z|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|20|8|@]|D|@]|E|$]]|$1|W|3|-4|5|6|7|21|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]|14|$5|Z|10|11|E|$12|15]]|16|$5|17|10|18|E|$19|1A|1B|-4]]]]

<p>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 <code>&lt;mydirect&gt;</code> vs <code>&lt;div class="mydirect"&gt;</code> and 2) you can get the same ease of styling by just using the proper css syntax.</p>

<p>Leave your directive just the way it is, except change it to <code>restrict: 'EA'</code> (docs for that <a href="https://docs.angularjs.org/guide/directive#template-expanding-directive" rel="noreferrer">here</a>) and <code>replace: false</code>, as shown here:</p>

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

<p>Here are the options you can now use and how to configure the corresponding CSS to get the styles you want, as shown in <a href="http://jsbin.com/xeqicuqalu/edit?html,css,output" rel="noreferrer">this jsbin</a>:</p>

<p><a href="https://i.stack.imgur.com/zJ7vU.png" rel="noreferrer"><img src="https://i.stack.imgur.com/zJ7vU.png" alt="enter image description here"></a></p>

<p>Hope that helps.</p>


blocks|key|208728|text|根据google+under和Angular指令创建逻辑，在下面示例的描述对象中，设置两个配置组件。首先，我们设置了限制配置选项。restrict选项用于指定如何在页面上调用指令。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|208729|正如我们之前看到的，有四种不同的方法来调用指令，因此有四个有效的restrict选项：|208730|'A'+-+<span+ng-sparkline></span>+
'E'+-+<ng-sparkline></ng-sparkline>+
'C'+-+<span+class="ng-sparkline"></span>+
'M'+-+|code-block|syntax|javascript|208731|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>As per google under and Angular directive creation logic  In below example’s description object, setting two config components. First, we’re setting the restrict config option. The restrict option is used to specify how a directive can be invoked on the page.</p>

<p>As we saw before, there are four different ways to invoke a directive, so there are four valid options for restrict:</p>

<pre><code>'A' - &lt;span ng-sparkline&gt;&lt;/span&gt; 
'E' - &lt;ng-sparkline&gt;&lt;/ng-sparkline&gt; 
'C' - &lt;span class="ng-sparkline"&gt;&lt;/span&gt; 
'M' - &lt;!-- directive: ng-sparkline --&gt;
</code></pre>


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

<pre><code>&lt;div class="mydirect"&gt;
  &lt;div class="classA"&gt;
    &lt;div class="subclassA"&gt;
      &lt;div class="subclassB"&gt;
      &lt;/div&gt;
    &lt;div class="classB"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I noticed that despite having the classnames in a css file ("mydirectstyle.css") and it being included in index.html, using my directive:</p>

<pre><code>angular.module("MyApp", []).
  directive('mydirect', function() {
    return {
      restrict: 'E',
      replace: true,
      template: '-All that Html here-'
    };
  });
</code></pre>

<p>None of the CSS properties are applied to it whatsoever. What is the best way to apply all my styles to those multiple classes? Can it be done such that I don't have to manually select each element and set individual CSS properties?</p>

<p>My index.html page contains a <code>&lt;mydirect&gt; &lt;/mydirect&gt;</code> that gets replaced by the directive template shown above.</p>


How to CSS style AngularJS directive?

假设我有一个带有模板的指令"mydirect“，其中包含很多带有很多嵌套类的div。例如：<div class="mydirect">  <div class="classA">    <div class="subclassA">      <div class="subclassB">      </div>   ...

问如何使用CSS样式AngularJS指令？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS样式AngularJS指令？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS样式AngularJS指令？
EN