1.自定义指令

在angular中，module下面的directive方法用于创建自定义指令，用法：

m1.directive('myTab',function(){

　　return {

　　　　restrict : 'AE',

　　　　replace : true,

　　　　templateUrl : '',

};

});

大致用法如上，在directive的第二个参数里面return出一个对象，对象里面有各种属性。

restrict----指定创建的指令是什么类型，A--attr属性指令，E--element标签指令，C---class指令，M---注释指令.常用的就是A和E。

replace---是否用模板来替换元素

templateUrl---指定模板字符串

还有一些：

controller---指令控制器。这里面可以定义一些指定公用的数据和方法。如：

controller : ['$scope',function($scope){
　　$scope.name = 'meng';
　　$scope.show = function(n){
　　　　alert(n+1);
　　}
}],

scope---作用域，共有三个值

默认值false。

表示继承父作用域;

true

表示继承父作用域，并创建自己的作用域（子作用域）;

{}

表示创建一个全新的隔离作用域；

隔离作用域中有三种绑定策略--@，=，&

@ --- 使用@（@attr）来进行单向文本（字符串）绑定

= --- 使用=（=attr）进行双向绑定变量

& --- 使用&来调用父作用域中的函数

link：一个函数，用于操作dom，添加事件，指令间相互调用

该函数一共有4个参数，scope，element，attr,reController

scope --- 该指令的作用域

element--- 该指令解析后的顶层元素

attr-- 属性

指令之间交互 通过transclude和require

设置transclude：true之后，就可以通过ng-transclude来嵌套指令

require---字符串代表另一个指令的名字，它将会作为link函数的第四个参数

没有前缀，指令会在自身提供的控制器中进行查找，如果找不到任何控制器，则会抛出一个error

？如果在当前的指令没有找到所需的控制器，则会将null传给link连接函数的第四个参数

^如果在当前的指令没有找到所需的控制器，则会查找父元素的控制器

?^组合

<!doctype html>

<html ng-app="myApp">

<head>

  <script src="http://cdn.staticfile.org/angular.js/1.2.10/angular.min.js"></script>

</head>

<body>

  <outer-directive>

     <inner-directive></inner-directive>

     <inner-directive2></inner-directive2>

  </outer-directive>

  <script>

    var app = angular.module('myApp', []);

    app.directive('outerDirective', function() {

          return {

               scope: {},

               restrict: 'AE',

               controller: function($scope) {

                  this.say = function(someDirective) {

                     console.log('Got:' + someDirective.message);

                  };

               }

           };

    });

    app.directive('innerDirective', function() {

          return {

               scope: {},

               restrict: 'AE',

               require: '^outerDirective',

               link: function(scope, elem, attrs, controllerInstance) {

                       scope.message = "Hi,leifeng";

                       controllerInstance.say(scope);

               }

          };

    });

    app.directive('innerDirective2', function() {

          return {

               scope: {},

               restrict: 'AE',

               require: '^outerDirective',

               link: function(scope, elem, attrs, controllerInstance) {

                       scope.message = "Hi,shushu";

                       controllerInstance.say(scope);

               }

          };

    });

  </script>

</body>

</html>
m1.directive('myTab',function(){

    return {

        restrict : 'E',

        replace : true,

        scope : {

            myId : '@',

            myData : '='

        },

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

            $scope.name = 'meng';

        }],

        templateUrl : 'temp3.html',

        link : function(scope,element,attr){

            //console.log(scope.name);

            //console.log(element);

            //console.log(attr.myId);

                 }

});

自定义指令directive的更多相关文章

  1. angularjs - 自定义指令(directive)

    自定义指令(directive) 使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 例子:使用驼峰法来命名一个指令, demoDirect ...

  2. vue从入门到进阶：自定义指令directive，插件的封装以及混合mixins（七）

    一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...

  3. angularjs自定义指令Directive

    今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...

  4. Vue input 控件: 通过自定义指令(directive)使用正则表达式限制input控件的输入

    前言: 网站中的input输入框使用非常广泛,因业务场景不同需要对输入框做合法性校验或限制输入,比如电话号码.邮件.区号.身份证号等.input框的不合法内容主要有两种方式处理:1.用户输入内容后,通 ...

  5. angular 自定义指令 directive transclude 理解

    项目中断断续续的用了下angular,也没狠下心 认真的学习.angular 特别是自定义指令这块 空白. transclude 定义是否将当前元素的内容转移到模板中.看解释有点抽象. 看解释有点抽象 ...

  6. Angular自定义指令directive:scope属性

    在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令.自定义指令,是为了扩展DOM元素的功能.代码中,通过指定directive中的restrict属性,来决定这个指令是作为 ...

  7. angularJs自定义指令.directive==类似自定义标签

    创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名 ...

  8. vue.js实现内部自定义指令和全局自定义指令------directive

    在Vue中,我们平时数据驱动视图时候,内部自带的指令有时候解决不了一些需求,这时候,Vue给我们一个很好用的东东 directive 这个单词是我们写自定义指令的关键字哦 之定义指令为我们提供了几个钩 ...

  9. vue 自定义指令directive

    //自定义指令:directive 的传参--可以数据也可以是字符串 Vue.directive('scroll', function (binding) { window.addEventListe ...

随机推荐

  1. Zepto 使用过程中遇到的问题总结

    简言之,zepto 是移动端的 jQuery,虽然很多地方不完全相同,不过详细的内容就不介绍了,主要把使用 zepto 时遇到过的问题总结一下. zepto 是分成多个模块的,最基础的文件不包含 to ...

  2. LeetCode-179. Largest Number

    179. Largest Number Given a list of non negative integers, arrange them such that they form the larg ...

  3. C语言PIC32 serial bootloader和C#语言bootloader PC端串口通信程序

    了解更多关于bootloader 的C语言实现,请加我QQ: 1273623966 (验证信息请填 bootloader),欢迎咨询或定制bootloader(在线升级程序). 今天介绍下我新完成的为 ...

  4. Word设置首页不同

    Sub 批量格式设置()  '此代码为指定文件夹中所有选取的WORD文件的进行格式设置 Dim MyDialog As FileDialog, vrtSelectedItem As Variant, ...

  5. lambda匿名函数

    1.python中的匿名函数的格式 lambda  arg1,arg2...,argN:expression    (lambda关键字后,冒号":"前是参数,多个参数用逗号&qu ...

  6. Java位运算经典实例

    一 源码.反码.补码 正数的源码.反码.补码相同,例如5:            5的源码:101            5的反码:101            5的补码:101 负数的源码.反码.补 ...

  7. [C#]List<int>转string[]，string[]转为string

    // List<int>转string[] public string[] ListInt2StringArray(List<int> input) { return Arra ...

  8. C# DateTime.ToString的坑

    当需要将时间类型转换为字符串类型时,一般直接使用datetime.ToString()方法即可 1.直接使用ToString(),不带任何参数,代码如下 static void Main(string ...

  9. [Altera]PLL仿真

    EDA Tools: 1.Quartus II 13.1(64-bit) 2.Modelsim SE-64 10.1c Time: 2016.05.05 ----------------------- ...

  10. BulkSqlCopy 批量导入数据（Ef支持）

    Ado.net对批量数据的支持相信大家都已经非常熟悉.再此就不在多说,就当是给自己备个份,没办法,这个方法太好用了. public static void BulkCreate( string tab ...