AngularJSAngularJS1.X学习笔记8-自定义指令(上)

  AngulaJS的指令是一种十分有力的特色,一个ng-repeat就能让大家卓殊便宜的突显一个多少列表,指令相当于是一个零部件,为我们将有些东西封装起来了,提供了复用的可能性。个人觉得自定义指令如故相比复杂的,下边开头攻关。

一、七个重要参数 

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>获取数据</title>
</head>
<body ng-controller="directiveCtrul">
    <h1 get-data>{{data}}</h1>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('myApp',[])
        .controller('directiveCtrul',function($scope){
            $scope.data = "你好啊!";
        })
        .directive("getData",function(){
            return function(scope,element,attrs){
                console.log(scope['data'])
            }
        })
    </script>
</body>
</html>

  用directive方法创立自定义指令,directive方法有八个参数,第二个参数表示指令名字,第三个参数是一个厂子函数,工厂函数再次来到一个工友函数,工人函数有四个参数,分别代表应用指令元素的作用域,应用指令的因素的包装对象,应用指令的因素的特色对象。

  AngularJS 1

 二、生成元素,减弱看重,统计表明式

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>生成元素,减少依赖,处理变化</title>
</head>
<body ng-controller="directiveCtrul">
    <div list-products='products' list-property="cat"></div>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('myApp',[])
        .controller('directiveCtrul',function($scope){
            $scope.products = [
                {name:"苹果",cat:"水果",price:5.0,expiry:100000000},
                {name:"香蕉",cat:"水果",price:6.0,expiry:9},
                {name:"桃子",cat:"水果",price:7.0,expiry:7},

                {name:"22",cat:"yy",price:5.0,expiry:5},
                {name:"33",cat:"yy",price:9.0,expiry:6},
                {name:"44",cat:"yy",price:4.0,expiry:2},
                {name:"55",cat:"yy",price:8.0,expiry:4},

                {name:"ww",cat:"tt",price:4.0,expiry:7},
                {name:"qq",cat:"tt",price:3.0,expiry:9},

            ];
        })
        .directive("listProducts",function(){
            return function(scope,element,attrs){
                var data = scope[attrs['listProducts']];
                console.log(data.length)
                var property = attrs['listProperty'];
                var listElem = angular.element("<ul>");

                for (var i = data.length - 1; i >=0; i--) {
                    //(function(){
                        listElem.append(angular.element("<li>")
                    .text(data[i][property]));
                    //})()

                }
                element.append(listElem);

            }
        })
    </script>
</body>
</html>

  下面的事例中,更具list-products
属性值从功能域得到指定数量,通过list-property属性获取要显得的习性,用这几个特性裁减了依靠,那样做没有就要突显的属性写死,扩充了灵活性。还设有一个题材就是即使对要呈现的习性应用了过滤器,那么上述指令将不能工作,解决方式是使用计算表明式。像这些样子

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>生成元素,减少依赖,处理变化</title>
</head>
<body ng-controller="directiveCtrul">
    <div list-products='products' list-property="price | currency"></div>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('myApp',[])
        .controller('directiveCtrul',function($scope){
            $scope.products = [
                {name:"苹果",cat:"水果",price:5.0,expiry:100000000},
                {name:"香蕉",cat:"水果",price:6.0,expiry:9},
                {name:"桃子",cat:"水果",price:7.0,expiry:7},

                {name:"22",cat:"yy",price:5.0,expiry:5},
                {name:"33",cat:"yy",price:9.0,expiry:6},
                {name:"44",cat:"yy",price:4.0,expiry:2},
                {name:"55",cat:"yy",price:8.0,expiry:4},

                {name:"ww",cat:"tt",price:4.0,expiry:7},
                {name:"qq",cat:"tt",price:3.0,expiry:9},

            ];
        })
        .directive("listProducts",function(){
            return function(scope,element,attrs){
                var data = scope[attrs['listProducts']];
                console.log(data.length)
                var property = attrs['listProperty'];
                var listElem = angular.element("<ul>");

                for (var i = data.length - 1; i >=0; i--) {
                    //(function(){
                        listElem.append(angular.element("<li>")
                    .text(scope.$eval(property,data[i])));
                    //})()

                }
                element.append(listElem);

            }
        })
    </script>
</body>
</html>

 

三、响应数据变化

  有时候大家的数据模型可能会暴发变化,这一个时候大家的下令中浮现的数目也应当相应发生变化才对。

  

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>响应变化</title>
</head>
<body ng-controller="directiveCtrul">
    <div dir>

    </div>
    <button ng-click="change()">改变</button>
    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('myApp',[])
        .controller('directiveCtrul',function($scope){
            $scope.data = "原来的数据";
            var isChange = false;
            $scope.change = function(){
                if(!isChange){
                    $scope.data = '新数据';
                    isChange=!isChange;
                }else{
                    $scope.data = '原来的数据';
                    isChange=!isChange;
                }

            }
        })
        .directive("dir",function(){
            return function(scope,element,attrs){
                var data = scope['data'];
                var h = angular.element('<h1>').text(data);
                element.append(h);
                scope.$watch('data',function(newvalue,oldvalue){
                    h.text(newvalue);

                })                

            }
        })
    </script>
</body>
</html>

 

  用一个$watch监控我们兴许发生变化的多寡就能够了。

四、关于jqLite

  jqLite是迷你版的jQuery,更jquery大致。上边给出其关键的主意以备参考,不做展开。 

  1、遍历DOM

方法 干嘛的
children() 找儿子
eq(index) 从一组元素中返回指定位置的元素
find(selector) 从后代中找指定的选择器的元素
next() 找弟弟
parent() 找爸爸

 

 

 

 

 

  2、修改元素

方法   干嘛的
addClass(name) 将选择的元素加一个class
attr(name,[value]) 获取或设置特性值
css(name,[vlaue]) 获取或设置一个css属性值
hasClass(name) 判断有没有指定的class
prop(name,[value]) 获取或设置第一个元素的值
removeAttr(name) 移除一个特性
removeClass(name) 移除一个class
text([value]) 设置或获得元素的文本
toggleClass(name) 切换class
val([value]) 设置或者获取value值

  

 

 

 

 

 

 

 

 

  3、创设与移除元素

方法 干嘛的
angular.element(html) 创建
after(ele) 在后插入
append(ele) 作为最后的子元素插入
clone() 克隆
prepend(ele) 作为第一个子元素插入
remove() 移出
replacewidth(ele) 替换
wrap(ele) 包裹

 

 

 

 

 

 

 

 

  4、事件有关

方法 干嘛的
on(event,handler) 绑定事件
off(event,handler) 移出事件
triggerHandler(event) 触发事件

 

 

 

 

  本文来了一个指令的开胃菜,接下去学习更是错综复杂的授命。

 

 

 

相关文章