angular指令浅谈

　　今天在闲暇时间再次对angularjs的指令进行了初探,不探不知道一探吓一跳啊,就一个简单的指令整整难住我了两个小时,先不说代码的逻辑是否复杂,就一些内部的一些实现让我看起来都是头疼的不行啊,不过最终还是解决了下面就来告诉大家angularjs的指令简单的运行过程,angularjs内置了大量的指令,看似简单却又复杂的不行,一旦深究你就会像染上毒瘾一样无法自拔啊,这也就是通常所说的强迫症,哈哈,下面就给大家附上今天的成功.

　　今天说实在的也没有写什么东西,就是对指令做了初步的学习,首先看HTML代码:

<div style="background: yellow">
        <super strength>动感超人----力量</super>
    </div>
    <div style="background: blue">
        <super strength speed>动感超人----力量,速度</super>
    </div>
    <div style="background: red">
        <super strength speed light>动感超人----力量,速度,敏捷</super>
    </div>

　　这些似乎也没有什么不过对于像我一样的初学者似乎会满脸懵逼,那么我就稍微给大家解释下哈,这里的super,strength,speed,light都是一些自定义的元素和属性,也就是对指令做了初始化,而在js代码中则是对指令做了定义,随之而来的便是js代码:

var app = angular.module('derApp',[]);
var a;
app.directive('super',function () {
    return {
        scope:{},//这个是独立作用域,与父作用域毫无关系,scope:true,这种形式的是继承了父作用域,可以引用父作用域中的属性
        restrict: 'AE',//A:代表的是属性E:代表的是元素,angular推荐使用A和E
        controller:function($scope){//controller 创建一个控制器,他会暴露一些api,利用这个api可以在多个指令之间进行通信
            $scope.ary = [];
            this.addStrength = function(){
                $scope.ary.push('strength');
                a=$scope.ary;
            };
            this.addSpeed = function(){
                $scope.ary.push('speed');
                a=$scope.ary;
            };
            this.addLight = function(){
                $scope.ary.push('light');
                a=$scope.ary;
            };
        },link:function(scope,element,attrs){//使用编程的方式修改最终成成的dom元素实例,添加事件监听,并设置数据绑定
            element.bind('mouseenter',function(){
                console.log(scope.ary);
                console.log(a);
            })
        }
    };
})
app.directive('strength',[function () {
    return {
        require:'^super',//require '^super'说明该指令依赖于上面的super指令当其存在时间才可以正常运行否则会报错
        restrict: 'AE',link: function (scope,attrs,superCtrl) {
            superCtrl.addStrength();
        }
    };
}])
app.directive('speed',restrict: 'AE',superCtrl) {
            superCtrl.addSpeed();
        }
    };
}])
app.directive('light',superCtrl) {
            superCtrl.addLight();
        }
    };
}])

　　首先现初始化了模块,然后定义了super指令,这个指令可以作为其他指令的父指令,从而实现指令的复用,当我写到这里时间,遇到了一个困扰我很久的问题,那就是不知道为什么当鼠标moouseenter时间为什么会console出不同的值,后来终于明白了,他的意义再于,js中定义了super指令,而html中声明了三个super 也就是意味这有三个super指令,这样就存在了三个独立作用域,至于为什么在第二个super上面会console出两个元素那是因为上面又定义了两个属性strength和speed这样就又执行了这两个指令,从而往scope.ary中push了两个元素哈哈,于是乎现在重于解决了,从这个问题看来,总结出一句话,技术达不到,不要瞎胡闹,还是要老老实实一步一个脚印的学习,这样才会飞的更高,下面放上项目连接哈:https://jsfiddle.net/htan72eb/ 注意这个项目要想查看效果必须打开控制台看输出,好了今天的分享就到这里,有不懂的地方可以追问哈

angular指令浅谈

相关文章