原文链接:https://blog.csdn.net/zhao351227041/article/details/44907629
今天是正式入职的第一天,领导还在广州出差,所有目前的工作还是比较清闲,同事给了我份关于部门产品的资料,我们部门是做CRM移动端开发的。今天也大体看了下公司的技术架构,其中遇到了许多的问题,在网上搜索了很久,找到了上面提供的博客,给了我许多的帮助,也发篇文章记录下自己的收获,希望对以后的小伙伴能起到一定的帮助。
自定义指令
在angularjs中directive()函数很好的帮助我们开发人员可以进行自定义指令的创建,在这其中有许多值得注意的地方
属性 | 描述 |
restrict | 决定一个指令可以如何被使用(例如:可以被作为元素使用<data-directive>,可以被作为属性使用<div data-directive>,也可以被作为类名使用<div class='data-directive'>,也可以被作为注释使用<!-- data-directive-->),其中驼峰命名在规范中也值得注意。 |
scope | 用于创建一个子scope或一个相对独立的scope |
template | 定义指令输出的表达式,可以是html元素,也可以是数据绑定表达式,甚至是其他指令 |
templateUrl | 提供指令所用模版的路径。如果模版被定义在 <script> 内,那它可以包含一个 DOM 元素的 id |
controller | 用于定义和制定相关的控制器 |
link | 用于DOM操作任务的函数 |
操作DOM
app.directive('myDomDirective', function () {return {
link: function ($scope, element, attrs) {
element.bind('click', function () {
element.html('You clicked me!');
});
element.bind('mouseenter', function () {
element.css('background-color', 'yellow');
});
element.bind('mouseleave', function () {
element.css('background-color', 'white');
});
}
};
});
以上的代码实现了绑定鼠标的敲击和滑过事件,改变了标签的CSS样式。值得注意的是bind()函数是将元素和一个或多个相关程序绑定。这在angularjs中也是适用的,不仅仅局限于jquery。
语法:
$(selector).bind(event,data,function)
构造AngularJS指令代码
原博主的编码规范行为给了我很大的启示,这样构筑的代码更加清晰,我也会遵循这一风格。
(function () {
var directive = function () {
return {
};
};
angular.module('moduleName')
.directive('directiveName', directive);
}());
总结:
对于刚参加工作的我还有许多值得学习的地方,提醒自己一定要保住虚心的姿态向身边的伙伴多多学习。