angularjs自定义模块

原文链接：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);
 
}());

总结：

对于刚参加工作的我还有许多值得学习的地方，提醒自己一定要保住虚心的姿态向身边的伙伴多多学习。