Question

我正在制作自定义指令Student.eager_load(:student_record).where("student_records.class_course_id = ?", params[:class_course_id]).order('student_records.start_date asc').last。

我应该在自己的文件中为此隔离CSS吗？

如果需要主应用程序中的CSS与其他页面共享，该怎么办？

Answer 1

看一下LESS和SASS css编译器。

我像这样构建我的应用程序。

/app
   /directives
       /fooWidget
           fooWidget.scss
           fooWidget.js
           fooWidget.html
   /directives.scss
/app.scss
/app.js

Answer 2

如果您打算在某个地方发布它，那么您肯定想要隔离CSS。

如果这只是供内部使用，那么这是一个偏好问题，但我认为大多数开发人员更愿意，如果它是分开的。

单独文件中的CSS仍然可以从其他地方定义的CSS继承。最终，您可能最终会使用Gulp来缩小和组合所有CSS。

Answer 3

我不认为这是必要的。如果要在指令中添加模板，那么将css保存到外部文件不会造成任何伤害，因为在解析DOM时指令会被加载。为元素编写的样式将相应地从外部样式表加载。

希望有所帮助。

Answer 4

将隔离CSS文件用于指令是一种很好的做法。您可以使用指令的结构，如下所示：

   /clockWidget
       clockWidget.css
       clockWidget.js
       clockWidget.html

对于自己的指令css，你可以创建一个包装所有html的css类，并使用该类只影响指令html。

例如，创建footer-widget css类并为该指令的html元素指定该类。

在clockWidget.css中：

span .footer-widget{
  background-color: red;
}

然后在你的HTML中：

    <div class="footer-widget">
      <span>I'm The footer</span>
    </div>

这样css类将包装所有的html，只影响指令html。并且您可以毫无问题地使用主应用程序css。

AngularJS - 自定义指令 - CSS单独文件？

4 个答案: