1、directive指令改变div样式
<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");//添加或删除一个样式类 }; } }; });
2、directive指令传递、获取参数
<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); }; } }; });
3、directive指令Angular + jQuery混合使用
<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"); }; } }; });4、directive指令传递、获取json参数、html控件赋值
<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); } }; } }; });
5、directive指令template模板
<show-property></show-property> appDirectives.directive('showProperty', function () { return { restrict: 'E', template: '<h1">hello world</h1>', replace: true }; });
*、css样式
<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>
*、angular String类型和JSON相互转换
angular.fromJson()方法:将 Json字符串 转换成 对象,或对象数组;angular.toJson()方法:将 Json对象 转换成string类型;