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, element, attrs,superCtrl) {            superCtrl.addStrength();        }    };}])app.directive('speed', [function () {    return {        require:'^super',        restrict: 'AE',        link: function (scope, element, attrs,superCtrl) {            superCtrl.addSpeed();        }    };}])app.directive('light', [function () {    return {        require:'^super',        restrict: 'AE',        link: function (scope, element, attrs,superCtrl) {            superCtrl.addLight();        }    };}])

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