繁体   English   中英

AngularJS-如何为自定义指令设置CSS类?

[英]AngularJS - how to set css class for the custom directive?

tab的CSS类nav这我会像这个指令使用HTML元素:

<nav tab></nav>

期望这样解释:

<nav class="tab">
    <a></a>
    <a></a>
    <a></a>
</nav>

...并且除了我无法将CSS类设置为顶部<nav>元素的问题之外,其他所有功能均按预期工作。 当然,我可以使用ng-class明确指定它,但这似乎不是一个好主意。

听说过.addClass()选项,但它根本不起作用:

tab.directive('tab', function($compile) {
        return {
            restrict: 'A',
            templateUrl: 'nav-tab.html',
            controller: function($http, $scope) {
                $http.get('/Tab/List')
                    .success(function(data) {
                        $scope.tabs = data;
                    }).error(function() {
                        alert("error");
                    });
            },
            controllerAs: 'tab',
            link: function(element, scope) {
                angular.element(element).addClass('tab');
                $compile(element)(scope);
            }
        }
    }); 

如何将CSS类添加到top指令元素,而无需在元素上明确指定?

链接功能顺序错误

代替

link: function(element, scope) {

更改为

link: function(scope, element, attrs) {

然后,您可以直接执行element.addClass因为jQLite api上具有.addClass方法。

我会将您的指令更改为“元素”(属性使用“ E”代替“ A”)

<tab></tab>

tab.directive('tab', function($compile) {
return {
    restrict: 'E',
    templateUrl: 'nav-tab.html'...

然后在您的模板nav-tab.html中添加该类:

<nav class="tab">
  <a></a>
  <a></a>
  <a></a>
</nav>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM