AngularJS 常用指令

<div id="ParentNode" class="button-bar">
<div class="bgstyle" change-element>First</div>
<div class="bgstyle" change-element>Second</div>
<div class="bgstyle" change-element>Third</div>
</div>

appDirectives.directive("changeElement", function () {
return {
link: function (scope, elements, attrs, controller) {
elements[0].onclick = function () {
console.log(123);
elements[0].style.height = "100px";
elements[0].style.border = "solid 5px #33cd5f";
elements[0].style.borderColor = "#886aea";
elements[0].style.backgroundColor = "#ef473a";
elements.css('background-color','#33cd5f');
elements.removeClass("bgstyle");
                elements.addClass("active");
                elements.toggleClass("active");//添加或删除一个样式类
};
}
};
});

<div class="button-bar">
<div class="bgstyle" get-params="100">获取100</div>
<div class="bgstyle" get-params="200">获取200</div>
<div class="bgstyle" get-params="300">获取300</div>
</div>

appDirectives.directive("getParams", function () {
return {
link: function (scope, elements, attrs, controller) {
elements[0].onclick = function () {
console.log(attrs.getParams);
};
}
};
});

<div class="airlines-wrap row">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6" ng-repeat="item in airlineList">
<dl class="dl-horizontal" add-active="{{item.id}}">
<dt>
<img src="images/mahang.jpg">
</dt>
<dd>
<span class="airlines-name">{{item.name_CN}}</span>
<span class="text-en">{{item.name_CN}}</span>
</dd>
</dl>
</div>
</div>

appDirectives.directive("addActive", function () {
return {
link: function (scope, elements, attrs, controller) {
elements[0].onclick = function () {
console.log(attrs.addActive);
$(".airlines-wrap").find(".dl-horizontal").removeClass('active');
elements.addClass("active");
};
}
};
});

<div class="button-bar">
<div class="bgstyle" get-json='{"id":1,"name":"qwer"}'>
获取json字符串
<p id="house"></p>
</div>
<div class="bgstyle" get-json='{"id":2,"name":"asdf"}'>
获取json字符串
<p id="car"></p>
</div>
<div class="bgstyle" get-json='{"id":3,"name":"zxcv"}'>
获取json字符串
<p id="beauty"></p>
</div>
</div>

appDirectives.directive("getJson", function () {
return {
link: function (scope, elements, attrs, controller) {
elements[0].onclick = function () {
console.log(attrs.getJson);
var item = angular.fromJson(attrs.getJson);
if (item.id == 1) {
elements[0].style.height = "50px";
$('#house').html("* " + item.name);
}
else if (item.id == 2) {
elements[0].style.height = "50px";
console.log(item.id);
$('#car').html("* " + item.name);
}
else if (item.id == 3) {
elements[0].style.height = "50px";
$('#beauty').html("* " + item.name);
}
};
}
};
});

<show-property></show-property>

appDirectives.directive('showProperty', function () {
return {
restrict: 'E',
template: '<h1">hello world</h1>',
replace: true
};
});

<style>
    .bgstyle{background-color:#8f8f8f;width:100%;height:30px;margin:2px 0 2px 0;text-align:center}
    .bgstyle-check{background-color:#ff3b30;width:100%;height:30px;margin:2px 0 2px 0;text-align:center}
    .active{background-color:#886aea}
</style>