angular的自定义指令---详解

1.angualr指令

  在angualr自己里面有许多丰富的指令,但都是平时所常见的,但对于自己所需要的可能有所欠缺,所以自己可能会摒弃原声指令,自己封装更为健壮灵活的指令;

 其实angular里面的指令也是基于下面所用到的步骤来创建的,只不过他都添加到了全局中,所以可以直接使用;

2.创建自定义指令

  首先创建模块app,再使用app的服务directive方法,

  创建指令内容第一个参数自定义的名字,第二个参数是自定义参数属性对象,该对象包括的属性基本在代码注释解释清楚;

  

    // a.创建模块
        var app=angular.module(‘myApp‘,[]);
          // b.创建自定义指令
          // 第一个参数:指令的名字
        app.directive(‘myZhiling‘,[function(){
            var obj={
                restrict:‘E‘,// A:attribue属性,E:element元素标签形式书,C:class以样式名的形式书写。M:comment注释,以注释的形式来书写
                 //template:  ‘<ul><li>我叫小明</li></ul>‘,
                templateUrl:‘./view.html‘,  //指向一个文件,最终angualr会请求这个文件,把里面的
                 //replace:true,//需要提供一个布尔值
                transclude:true,//需要提供一个布尔值
                 scope:{//获取自定义指令所在元素的属性值
                    suibian:‘@term‘,//suibian这个属性会拿到自定义标签指令中属性名为term的属性值,@符号后面跟上属性名,@只能是指令内传过来的值。
                     obj:‘=grade‘,//=可以跟父控制器相互改变,双向绑定
                     method:‘&‘//这是简写方式,angualr会寻找属性名为age的属性,并拿到它的值,父控制器内的方法
                  },
          link:function(scope,element,attributes){
            //相当于指令模板的控制器!
            //可以接受scope里面的属性对象,然后再自己的控制器内处理,作用于指令的模板中,
           },
          controller:function(){
          }

            };
            return obj;
        }]);

  

规则说明:

  在scope里面的属性,即是自定内传进来的参数,可以是一个对象或是简单的字符串内容,然后就会自动填充到我们指令所在模板的标签位置;

  指令的模板就是tamplateUrl所指向的文件内的内容;

  link,controller本质的内容都是相对于指令所用到位置所在控制器的子控制器;

  指令名驼峰命名,使用时要转变成‘-’连接

  scope内的多种不同符号的意义;

3.使用介绍:

在自己的项目中使用自己的指令,直接引入即可;

<my-zhiling obj="{name:‘张三‘}" term="不随便">找小明</my-zhiling>

  指令在接收到值或在link、controller内所控制到方法,数据等也会填充到指令模板的位置,从而才形成功能强大的指令

  

时间: 2024-10-14 12:20:50

angular的自定义指令---详解的相关文章

angular 自定义指令详解 Directive

在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足你的各种需求的指令. 本篇文章的参考来自  AngularJS权威指南 , 文章中主要介绍指令定义的选项配置 废话不多说,下面就直接上代码 //angular指令的定义,myDirective ,使用驼峰命名法 angular.module('myApp', []) .directive('myDi

angular 自定义指令 详解--restrict、restrict、replace

Angularjs 允许根据实际业务需要自定义指令, 通过angular全局对象下的 directive 方法实现.可以自定义属性.自定义标签.自定义功能 接下来定义一个名叫custom的指令,并利用这个自定义指令来实现元素的替换 html代码: <body ng-app="app"> <p custom></p> <custom></custom> js代码: var app = angular.module("a

AngularJS自定义指令详解(有分页插件代码)

前言 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 通过 .directive() 函数来添加自定义的指令. 调用自定义指令时,需要在HTMl 元素上添加自定义指令名. 自定义指令命名规则:使用驼峰命名法来命名,即除第一个单词外的首字母需大写.如: myDirective. 在html页面调用该指令时需要以 - 分割,如: my-directive.示例代码: <body ng-app="myApp"> <my-directive><

day3 自定义指令详解

在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足你的各种需求的指令. 本篇文章的参考来自  AngularJS权威指南 , 文章中主要介绍指令定义的选项配置 废话不多说,下面就直接上代码 //angular指令的定义,myDirective ,使用驼峰命名法 angular.module('myApp', []) .directive('myDi

AngularJS 自定义指令详解

版权声明:本文为博主原创文章,未经博主允许不得转载. //blog.csdn.net/qq_27626333/article/details/52261409 除了 AngularJS 内置的63个指令外,我们还可以创建自定义指令.你可以使用 .directive 函数来添加自定义的指令.要调用自定义指令,HTML 元素上需要添加自定义指令名.使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive,自定义指令的参数如下: [

Vue.js 源码分析(二十三) 高级应用 自定义指令详解

除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令. 官网介绍的比较抽象,显得很高大上,我个人对自定义指令的理解是:当自定义指令作用在一些DOM元素或组件上时,该元素在初次渲染.插入到父节点.更新.解绑时可以执行一些特定的操作(钩子函数() 自定义指令有两种注册方式,一种是全局注册,使用Vue.directive(指令名,配置参数)注册,注册之后所有的Vue实例都可以使用,另一种是局部注册,在创建Vue实例时通过directives属性创建局部指令,局

AngularJs自定义指令详解(5) - link

在指令中操作DOM,我们需要link参数,这参数要求声明一个函数,称之为链接函数. 写法: link: function(scope, element, attrs) { // 在这里操作DOM} 如果指令使用了require选项,那么链接函数会有第四个参数,代表控制器或者所依赖的指令的控制器. // require 'SomeController',link: function(scope, element, attrs, SomeController) { // 在这里操作DOM,可以访问r

Angular JS 中 指令详解

Angular JS的强大功能就在于其可以自定义很多指令,现在就指令做一下详细的剖析. 一个Angular js 指令(directive)的生命周期 开始于$compile方法 结束于$link方法. angular.module('myApp', []) .directive('myDirective', function() { return { restrict: String, priority: Number, terminal: Boolean, template: String

vue2.0 自定义指令详解

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue2.2.js"></script> </head> <body> <div id="app"> <div v-lang="color