AngularJS 常用指令

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类型；