Angular 常用指令

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",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",controller) {
            elements[0].onclick = function () {
                console.log(attrs.addActive);
                $(".airlines-wrap").find(".dl-horizontal").removeClass('active');
                elements.addClass("active");
            };
        }
    };
});

*、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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!