• angular扩展


    1.Angular 指令

    AngularJS 通过被称为 指令 的新属性来扩展 HTML

    -通过内置的指令来为应用添加功能,内置指令带有前缀 ng-

    ng-app 指令启动一个AngularJS应用,它定义根元素

    ng-init 指令初始化一个AngularJS应用程序的数据

    ng-model 指令把元素值(输入域的值)绑定到应用程序

    ng-repeat 指令重复html元素集合中的每个项目 更多内置指令: http://www.runoob.com/angularjs/angularjs-reference.html

    自定义指令:

    除了内置的指令外, AngularJS允许自定义指令

    -可以使用 .directive( ) 函数来添加自定义的指令

    -要调用自定义指令,HTMl 元素上需要添加自定义指令名

    -使用驼峰法来命名一个自定义指令,如: myDirective

    但在使用它时需要以 - 分割,如:my-directive

    directive 设置:

       1.restrict:字符串,可选,指令在DOM里面以什么形式被声明

    取值有:E(元素),A(属性),C(类),M(注释),其中默认值为A

    E(元素):<directive-name></directive-name>

    A(属性):<div directive-name></div>

    C(类):   <div class=‘directive-name’></div>

    M(注释):<!-- directive:directive-name -->

    例 restrict:‘CA’表示指令在DOM中可用类名和属性形式被声明

       2。replace:布尔值,默认值为false,表示是否替换原来的标签;

      3. template:字符串,可选,指定一段HTML模板

    例:template:"<div><h3>hello world</h3></div>"

         templateUrl:字符串,可选,指定一段HTML模板的路径

    例1:templateUrl:'abc' abc为对应模板路径的id

    例2:templateUrl:‘abc.html’ abc.html为对应模板路径

     

      4. transclude: 表示自定义指令是否复制原始标记中的内容

    一般情况下和 ng-transclude 指令一起使用

    比如:template:“<div>指令内部的内容<div ng-transclude>原始标记中的内容</div></div>” 这时,原始标记中的内容会嵌入到ng-transclude这个div中

    5.scope

      scope:布尔值或对象,描述指令与父作用域的关系;

      scope:false, // 使用父作用域作为自己的作用域

      scope:true, // 新建一个作用域,该作用域继承父作用域

      scope: {

        myStr: '@', //传递一个字符串作为属性的值

        myAttr: '=', //父作用域中的一个属性,在指令中调用

        myFun: '&', //父作用域中的一个函数,在指令中调用

      }

    controller:表示绑定指令内部使用的数据;

    例: controller: ['$scope',function($scope){

      $scope.name = '指令内部共享数据';

    }],

    template:'<div>{{name}}</div>'

    6.link:表示当directive被angular编译后,执行该方法;

    例: (大部分指令逻辑代码编写的地方)

    link:function(scope,element,attr,controller){

      element.on('click','span',function(){

      var self = $(this) , i = self.index();                                 self.addClass('active').siblings().removeClass('active');

      });

    }

    link:function(scope,element,attr,controller){ ... }

     //scope:指令内部scope的引用

     //element:包含指令的DOM元素的引用,link方法一般通过jQuery

    操作实例(如果没有加载jQuery,还可以使用AngularJs jqLite)

     //attr:表示这个DOM元素上的自定义属性

     //controller:在有嵌套指令的情况下使用。这个参数作用在于把子指令的引用提供给父指令,允许指令之间进行交互

    Angular 过滤器

    -过滤器可用于转换数据

    -使用一个管道符 | 添加到表达式和指令中

    uppercase 过滤器将字符串格式化为大写

    lowercase 过滤器将字符串格式化为小写

    currency 过滤器将数字格式化为货币格式

    orderBy 过滤器根据表达式排列数组

    filter 过滤器从数组中选择一个子集

    自定义过滤器:

    AngularJs允许自定义过滤器,

    通过 filter( ‘filtername’ , fn )

    方法定义 filtername为自定义过滤器名,fn为过滤器函数

    过滤器函数返回一个方法,方法返回一个新数组

  • 相关阅读:
    开发新手最容易犯的50个 Ruby on Rails 错误(1)
    Spring Data Redis 让 NoSQL 快如闪电(2)
    为什么每个程序员都应该懂点前端知识?
    如何在 Flickr 上找到又酷,又有趣,且版权自由的照片?
    微服务扩展新途径:Messaging
    为什么现代企业无法真正实现组合式监控?
    开发者和程序员需要关注的42个播客
    战略性情绪分析的5大数据来源
    Spring Data Redis 让 NoSQL 快如闪电 (1)
    对抗告警疲劳的8种方法
  • 原文地址:https://www.cnblogs.com/SunShineM/p/6019659.html
Copyright © 2020-2023  润新知