发表于: 2017-05-14 23:43:53

0 922


今天完成的事情:

今天看书学习了AngularJS自定义指令部分的内容。

查看了师兄给的有微钱项目的代码,但正如相博所说,内容太多,找不到重点,看了收获不大。

就像是面对一个金矿,却没有带挖矿工具。

明天计划的事情:

做出任务8要求的分页和搜索框,

遇到的问题:

暂无

收获:

指令是扩展扩展具有自定义功能的HTML元素的途径。比如为 DOM 元素调用方法、定义行为绑定数据等。本质上是在HTML中通过元素、属性、类或注释来添加功能。

指令主要分为两种:内置指令和自定义指令。假设我们已经创建了一个完整的HTML文档,其中包含了AngularJS,并且DOM中已经用ng-app指令标识出了应用的根元素,当AngularJS编译HTML时就会调用指令。

通过AngularJS模块API中的.directive()方法,我们可以通过传入一个字符串和一个函数来注册一个新指令。其中字符串是这个指令的名字,指令名应该是驼峰命名风格的,函数应该返回一个对象,包含了用来定义和配置指令所需的方法和属性。

 <my-directive></my-directive>

<script>

    angular.module('myApp',[])

            .directive('myDirective', function() {

                return {

                    restrict: 'E',

                    replace:true,

                    template: '<a href="http://google.com">Click me to go to Google</a>'

                };

            });

</script>

restrict属性有4个值元素(E) 、属性(A) 、类(C)或注释(M)用以制定格式来调用,可以有不止一种格式,比如 restrict: 'EAC'。

var mainDirectives = angular.module('mainDirectives',[])

.directive('jobfocus1',function () {

    return {

            restrict: 'AE',  //调用方式

            replace: true,   //调用时是否替换调用标签,还是在嵌入内部

            templateUrl: '../tpls/focus/jobcarot2.html',  //模板路径

            scope: {},      //是否生成独立作用域

            controller: function ($scope, $element, $attrs, $transclude) {

                        共用的方法,参数

                        如果存在多个指令交互,这个就可以作为主指令,其他指令需要操作到的函数或方法就在这里调用,

                        也就在link函数的supermanCtrl参数中调用

                        }

            link:function (scope, ele, attrs,supermanCtrl){

                函数参数:

                        scope:当前作用域对象

                         ele:当前元素

                        attrs:当前元素的属性

                        supermanCtrl:是否存在

              指令逻辑,在这里操作dome,

            }

        }

    })

scope参数是可选的,可以被设置为true或一个对象。默认值是false。

当为true时:继承并隔离,父子作用域互相影响

当为false时:继承但是不隔离,也就是说子作用域改变并不会影响父作用域

当为{}时:隔离且不继承


返回列表 返回列表
评论

    分享到