Angular 常用指令

大佬教程收集整理的这篇文章主要介绍了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>

大佬总结

以上是大佬教程为你收集整理的Angular 常用指令全部内容，希望文章能够帮你解决Angular 常用指令所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。