Question

我想为Angular组件添加一个默认类。在我的指令中，我为这个组件加载了一个模板。该指令由限制：E＆＃39;加载。像这样：

<my-angular-component></my-angular-component>

结果应该是这样的：

<my-angular-component **class="my-angular-component"**>
    template
</my-angular-component>

是否有角度方法来添加此特定类？

Answer 1

你必须使用链接，见下面的例子：

假设这是 html 代码：



<section ng-app="myApp" ng-controller="MainCtrl">
    <my-angular-component></my-angular-component>
</section>

这是Js文件：

var myApp = angular.module('myApp', []);

function MainCtrl($scope) {

}

//Directive that returns an element which adds buttons on click which show an alert on click
myApp.directive("myAngularComponent", function(){
    return {
        restrict: "E",
        template: "<span addbuttons >Click to add buttons</span>",
        link: function(scope, elem, attrs,$compile) {
           elem.addClass('myCss');
           $compile(element)(scope);

        }
    }
});

这是css：

的

的
.myCss{ background:green; }

的

请注意指令中使用的链接功能。这需要三个参数：范围，元素，属性

的范围

- 传递给指令的范围。在这种情况下，它与父控制器范围相同。

的 ELEM

- 应用指令的jQLite（jQuery的一个子集）包装元素。如果在包含AngularJS之前在HTML中包含了jQuery，那么这将成为jQuery包装而不是jQLite。由于元素已经用jQuery / jQLite包装，因此无需再次将其包装在$（）中进行DOM操作。

的 ATTRS

- 表示附加到应用指令的元素的规范化属性的对象。例如，您可以在HTML中附加属性，例如：并在链接函数中将其作为attrs.someAttribute访问。

请参阅示例听取：http://jsfiddle.net/kevalbhatt18/vgpmoca3/1/

将默认类添加到Angular组件

1 个答案:

的范围

的 ELEM

的 ATTRS