zoukankan      html  css  js  c++  java
  • 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、绑定事件监听




     
  • 相关阅读:
    jQuery 语法
    jQuery 简介
    把数据存储到 XML 文件
    XML 注意事项
    XML DOM (Document Object Model) 定义了访问和操作 XML 文档的标准方法。
    通过 PHP 生成 XML
    XML 命名空间(XML Namespaces)
    XML to HTML
    XMLHttpRequest 对象
    使用 XSLT 显示 XML
  • 原文地址:https://www.cnblogs.com/zyjzz/p/7076778.html
Copyright © 2011-2022 走看看