将自定义css添加到指令并将其与页面css隔离 - AngularJS

Question

我已经搜索过将自定义CSS文件添加到AngularJS中的指令的可能性。但还没有找到任何解决方案。可能吗？如果没有，是否有另一种方法来分离我想要自定义样式的代码块。 我的代码：

app.directive("tabs", function () {
    return {
        restrict: 'EA',
        replace: true,
        styleUrl: ['tabs.css'],<--Did not work- I know it might only be a Angulr2 thing.
        template: `
                     <!-- Tabs -->
                    <div class="container">
                        <ul class="nav nav-tabs">
                            <li ng-class="{ active: isSet(1) }">
                                <a href ng-click="setTab(1)">Home</a>
                            </li>
                            <li ng-class="{ active: isSet(2) }">
                                <a href ng-click="setTab(2)">Profile</a>
                            </li>
                            <li ng-class="{ active: isSet(3) }">
                                <a href ng-click="setTab(3)">Messages</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div ng-show="isSet(1)">
                              //Tabcontent
                            </div>
                            <div ng-show="isSet(2)">
                            //Tabcontent
                            </div>
                            <div ng-show="isSet(3)">
                                   //Tabcontent
                            </div>
                        </div>
                    </div>
                    <!-- Tabs -->
                `    };

我得到了它的工作，但它仍然与页面css混淆。它不是指令选择器的共识。