发表于: 2017-05-31 23:30:33

2 983


今天完成的事情:完成了首页,关于我们页面。
明天计划的事情:继续写页面。
遇到的问题:婷姐请假好几天了 万一要是还不回来 我心态就要崩了。

$state.includes弄不起来。。
收获:联系我们页面使用ng-show完成;

使用雪碧图改变左侧面板图标的颜色。

复习了一下指令。

 link:function(scope,ele,attrs,ctrl,trans)link一共有5个参数。

angular.module('app', [])

.directive('myDirective', function() {

    return {

    restrict: String,                

    priority: Number,

    terminal: Boolean,

    template: String or Template Function:

    function(tElement, tAttrs) {...},

    templateUrl: String,

    replace: Boolean or String,

    scope: Boolean or Object,

    transclude: Boolean,

    controller: String or

    function(scope, element, attrs, transclude, otherInjectables) { ... },

    controllerAs: String,

    require: String,

    link: function(scope, iElement, iAttrs) { ... },

    compile: // 返回一个对象或连接函数,如下所示:

    function(tElement, tAttrs, transclude) {

        return {

            pre: function(scope, iElement, iAttrs, controller) { ... },

            post: function(scope, iElement, iAttrs, controller) { ... }

           }

        return function postLink(...) { ... }

        }

    };

 });

把它们分成三类:

  1. 描述指令或DOM本身特性的内部参数

  2. 连接指令外界、与其他指令或控制器沟通的对外参数

  3. 描述指令本身行为的行为参数

内部参数

  • restrict:String,E(元素)<my-directive></my-directive>

  •  A(属性,默认值)<div my-directive="expression"></div> 

  • C(类名)<div class="my-directive:expression;"></div> 

  • M(注释)<--directive:my-directive expression-->

  • priority: Number,指令执行优先级

  • template: String,指令链接DOM模板,例如“<h1>{{head}}</h1>”

  • templateUrl:String,DOM模板路径

  • replace: Boolean,指令链接模板是否替换原有元素,

对外参数——scope

scope参数非常重要,本应该是放到最后说明的,但是scope却是理解其他参数的关键,所以务必先跟大家说清楚。

scope参数的作用是,隔离指令与所在控制器间的作用域、隔离指令与指令间的作用域。

scope参数是可选的,默认值为false,可选true、对象{};

  • false:共享父域

  • true:继承父域,且新建独立作用域

  • 对象{}:不继承父域,且新建独立作用域

false、true、{}三者对比

对外参数——require

scope是指令与外界作用域通讯的桥梁,而require是指令与指令之间通讯的桥梁。这个参数最大的作用在于,当要开发单指令无法完成,需要一些组合型指令的控件或功能,例如日期控件,通过require参数,指令可以获得外部其他指令的控制器,从而达到交换数据、事件分发的目的。

使用方法:require: String or Array——String值为引入指令名称,并且有两个寻找指令策略符号‘?’与‘^’;Array数组则为多个外部指令名称。

在link函数第4个参数ctrl中获取注入外部指令的控制器,如果require为String,ctrl为对象,如果require是数组,ctrl为数组。




返回列表 返回列表
评论

    分享到