AngularJS 常用指令

来源：互联网发布：是京东好还是淘宝好编辑：程序博客网时间：2024/04/29 13:26

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

0 0