今天在闲暇时间再次对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/ 注意这个项目要想查看效果必须打开控制台看输出 ,好了今天的分享就到这里,有不懂的地方可以追问哈