• angualar入门学习-- 自定义指令 认识属性


    个AngularJS指令在HTML代码中可以有四种表现形式:

    1、作为一个新的HTML元素来使用

    2、作为一个元素的属性来使用

    3、作为一个元素的类来使用

    4、作为注释来使用

    一。创建指令

    angular.directive("directiveName", directiveFactory);

    第一个参数是指令名,第二个参数指令配置函数

    配置函数里的属性有 :

    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 restrict[string]:规定指令在HTML中的表现形式。A代表属性、E代表元素、C代表类、M代表注释。

    2 template[string or function]

       templateUrl:用它来指向一个外部的文件地址,所以我们通常把模板放在外部的一个HTML文件中,然后使用templateUrl来指向他

    3 link[function]属性 :函数,它包括三个参数:scope、element、attrs。link函数主要是用来添加对DOM元素的事件监听、监视模型属性变化、以及更新DOM的。

    4 scope[boolean or object]:该属性是用来定义指令的scope的范围,默认情况下是false,也就是说该指令继承了父controller的scope,可以随意的使用父controller的scope里的属性,但是这样的话就会污染到父scope里的属性。所以我们可以让scope取以下两个值:true和(对象){}。

    当为true的时候,表示让Angular给指令创建一个继承于父scope的scope。

    -----------------

    scope属性:

    取值为false:指令不创建新作用域,继承父controller的scope

    取值为true:指令创建新作用域,不继承了父controller的scope

    取值为对象时--孤立作用域

      孤立作用域:虽然指令是个 孤立的个体,但很多时候需从父作用域获取信息,scope对象属性,相当于指令对外接口,将孤立作用域的属性与外部作用域属性值绑定。

     @ 或 @attr   将孤立作用域成员与 父作用域属性单向绑定

    = 或 =attr      将孤立作用域成员与 父作用域属性双向绑定

    & 或 &attr      将孤立作用域成员与 父作用域方法双向绑定

        

    <div id="comp">
        <div my-greeting="{{directContent}}"></div>
    </div>

    创建一个属性形式myGreeting指令(html不区分大小写,以横线形式书写;而ng中,驼峰式)

    scope :{
        mydirect : @,
        directContent : "@mydirect"
    
    }
    scope取值为非空对象,则创建一个孤立作用域,@表示与 父作用域属性单向绑定
    ------------
    controller属性:String or function(scope, element, attrs, transclude, otherInjectables) { ... }
      当前指令所依赖的其他指令的控制器实例,用于多个嵌套指令之间 的相互通信。需与指令配置对象的require属性一同使用
    -----------------------
    当指令需要给外部暴露一些方法或数据时,用controller
    但对指令内部进行操作时 用link
    -----------------------
     compile属性

    compile:
    function(tElement, tAttrs, transclude)

    用于处理需要修改模板DOM的。
    设置了complie后,指令配置对象中的link属性会被忽略掉,不再执行(这与指令编译执行过程有关),
    而是执行compile属性函数返回的link函数。
    注 : compile里不要执行任何DOM变形之外的操作(性能 安全问题)
     tElement :指令所在的元素DOM;
     tAttrs: 这个元素上的所有属性
    ----------------------------
    link属性
    link一般用来操作DOM、绑定事件监听




     
  • 相关阅读:
    【日常学习】codevs1287 矩阵乘法题解
    数据库系统概论-[04]索引
    oracle-sql分析练习
    大水题(容斥原理)
    大水题(容斥原理)
    hdu 2952 Counting Sheep
    hdu 2952 Counting Sheep
    HDU 2612 Find a way
    HDU 2612 Find a way
    hdu 2181 哈密顿绕行世界问题
  • 原文地址:https://www.cnblogs.com/zyjzz/p/7076778.html
Copyright © 2020-2023  润新知