AngularJs(九)--自定义指令(三)及选项卡实例和拖拽实例

最新推荐文章于 2024-09-05 09:10:35 发布

tongwandouQX

最新推荐文章于 2024-09-05 09:10:35 发布

阅读量861

点赞数

分类专栏： angularjs 文章标签： link 属性指令自定义拖拽指令 myDrag

本文链接：https://blog.csdn.net/qianxing111/article/details/79669034

版权

angularjs 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

link选项

在自定义指令当中是用来进行DOM操作的。
接收四个参数:

(1)scope

自定义指令的作用域

(2)element

每一个自定义指令模板的最外层（父层）的元素

(3)attr

当前标签上的属性

<pre>
    m1.directive("myTab",function(){
        return{
            restrict:"E",
            replace:true,
            scope:{
                myId:'@aaa',
                myData:'='
            },
            controller:["$scope",function($scope){
                $scope.name="good";
            }],
            templateUrl:'temp2.html',
            link: function(scope,element,attr){
                console.log(scope.name);
                console.log(element);
                console.log(attr);
            }
        };
    });
</pre>

运行结果：
<img src="1.png"/>

选项卡实例

之前说过angularJs内置了一个简化版(轻量级)的jQuery：jqLite,如果要使用jQuery的方法，最好在页面中再引入jQuery文件；
比如jQuery中的delegate方法，jqLite没有提供，这时还是需要单独引入jQuery文件；
angular并不依赖jQuery，当Angular检测到你的页面里有jQuery出现，他就会用这个jQuery而不再用jqLite。

<pre>
    <!DOCTYPE html>
    <html lang="en" ng-app="myApp">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #div1 div,
            #div2 div{
                width: 200px;
                height:200px;
                border: 1px solid red;
                display: none;
            }
            #div1 input.active,
            #div2 input.active{
                background-color: red;
            }
        </style>
        <script src="js/jquery.min.js"></script>
        <script src="js/angular.min.js"></script>
        <script type="text/javascript">
            var m1= angular.module("myApp",[]);
            m1.directive("myTab",function(){
                return{
                    restrict:"E",
                    replace:true,
                    scope:{
                        myId:'@aaa',
                        myData:'='
                    },
                    controller:["$scope",function($scope){
                        $scope.name="good";
                    }],
                    templateUrl:'temp2.html',
                    link: function(scope,element,attr){
                        /*console.log(scope.name);
                        console.log(element);
                        console.log(attr);*/
                        //由于element是在模板生成之前就已经执行完成，故需要用委托的写法才能找到后续的元素
                        element.delegate('input','click',function(){
                            $(this).attr('class','active').siblings('input').attr('class','');
                            $(this).siblings("div").eq($(this).index()).css('display','block').siblings('div').css('display','none');
                        });
                    }
                };
            });
            m1.controller('Aaa',['$scope',function($scope){
                $scope.data1 = [
                    {title:"数学",content:"11111"},
                    {title:"语文",content:"22222"},
                    {title:"英语",content:"33333"}
                ];
                $scope.data2 =[
                    {title:"球类",content:"网球"},
                    {title:"舞蹈",content:"JAzz"}
                ];
            }]);
        </script>
    </head>
    <body ng-controller="Aaa">
        <my-tab aaa="div1" my-data = "data1"></my-tab>
        <my-tab aaa="div2" my-data = "data2"></my-tab>
    </body>
    </html>
</pre>

temp2.html:

<pre>
    <div id="{{myId}}">
        <!--ng-class="{active:$first}"中的$first指的是ng-repeat中的第一项-->
        <input type="button" ng-repeat="data in myData" ng-value="data.title" ng-class="{active:$first}"/>
        <div ng-repeat="data in myData" ng-style="{display:$first ? 'block':'none'}">{{data.content}}</div>
    </div>
</pre>

运行结果：
<img src="2.png"/>
从图中可以看出，选项卡功能已经实现。

(4)reController

在require配置下，找到指定指令的控制器。

自定义拖拽指令实例（属性指令）

简单拖拽指令实例

<pre>
    <!DOCTYPE html>
    <html lang="en" ng-app="myApp">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
           #div1{
               width: 100px;
               height: 100px;
               background-color: red;
               position: absolute;
           }
        </style>
        <script src="js/jquery.min.js"></script>
        <script src="js/angular.min.js"></script>
        <script type="text/javascript">
            var m1= angular.module("myApp",[]);
            m1.directive("myDrag",function(){
                return{
                    restrict:"A",
                    link: function(scope,element,attr){
                        console.log(element);//#div1
                        var disX=0,disY=0;
                        console.log(attr);//返回#div1元素的所有信息
                        element.on('mousedown',function(ev){
                            var that = this;
                            //offset 获取匹配元素在当前视口的相对偏移, ev.pageX鼠标相对于文档的左边缘的位置。
                            disX = ev.pageX - $(this).offset().left;
                            disY = ev.pageY - $(this).offset().top;
                            $(document).on('mousemove',function(ev){
                                $(that).css("left",ev.pageX - disX);
                                $(that).css("top",ev.pageY - disY);
                            });
                            $(document).on('mouseup',function(){
                                $(document).off();
                            });
                            return false;
                        });
                    }
                };
            });
            m1.controller('Aaa',['$scope',function($scope){

            }]);
        </script>
    </head>
    <body ng-controller="Aaa">
        <div id="div1" my-drag></div>
    </body>
    </html>
</pre>

运行结果：
<img src="3.png">
可以实现div1正常拖拽功能。
当给my-drag属性指令<div id="div1" my-drag = "true">附上属性值时，打印attr对象出来，可以看到”myDrag”的值为true，不过这个值是string类型的。

2.带有虚线框的拖拽指令实例

<pre>
    <!DOCTYPE html>
    <html lang="en" ng-app="myApp">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
           #div1{
               width: 100px;
               height: 100px;
               background-color: red;
               position: absolute;
           }
        </style>
        <script src="js/jquery.min.js"></script>
        <script src="js/angular.min.js"></script>
        <script type="text/javascript">
            var m1= angular.module("myApp",[]);
            m1.directive("myDrag",function(){
                return{
                    restrict:"A",
                    link: function(scope,element,attr){
                        console.log(element);//#div1
                        var disX=0,disY=0;
                        console.log(attr);
                        //这行代码实际上是将attr.myDrag的值的类型变成boolean类型
                        attr.myDrag = angular.equals(attr.myDrag,'true');
                        element.on('mousedown',function(ev){
                            var that = this;
                            //offset 获取匹配元素在当前视口的相对偏移, ev.pageX鼠标相对于文档的左边缘的位置。
                            disX = ev.pageX - $(this).offset().left;
                            disY = ev.pageY - $(this).offset().top;
                            if(attr.myDrag){
                                var $line = $('<div>');//创建一个div
                                $line.css({ width: $(this).outerWidth(), height: $(this).outerHeight(),
                                    position:'absolute', left: $(this).offset().left,
                                    top: $(this).offset().top,border: '1px dotted gray'
                                });
                                $('body').append($line);
                            }

                            $(document).on('mousemove',function(ev){
                                if(attr.myDrag){
                                    $line.css("left",ev.pageX - disX);
                                    $line.css("top",ev.pageY - disY);
                                }else{
                                    $(that).css("left",ev.pageX - disX);
                                    $(that).css("top",ev.pageY - disY);
                                }

                            });
                            $(document).on('mouseup',function(){
                                $(document).off();
                                if(attr.myDrag){
                                    $(that).css("left",$line.offset().left);
                                    $(that).css("top",$line.offset().top);
                                    $line.remove();
                                }
                            });
                            return false;
                        });
                    }
                };
            });
            m1.controller('Aaa',['$scope',function($scope){

            }]);
        </script>
    </head>
    <body ng-controller="Aaa">
        <div id="div1" my-drag = "true"></div>
    </body>
    </html>
</pre>

运行结果：
这里写图片描述