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. 使用Fluent配置表关系

    转载MS官方文档:https://msdn.microsoft.com/zh-cn/data/jj591620 Configuring Relationships with the Fluent AP ...

  2. Microsoft Azure 01 (Summarize)

    What is Windows Azure? As a cloud platform from Microsoft that provides a wide range of different se ...

  3. jQuery 正则选择器

    http://james.padolsey.com/snippets/regex-selector-for-jquery/ A while ago I published an article exp ...

  4. java多线程的几种实现方式记录

    传统的实现线程的方式为三种,分别为继承Thread类,重写run()方法:实现Runable接口,重写run()方法:实现callable接口,重写call()方法:下面来记录一下最基本的三种编码实现 ...

  5. scala-类

    ---恢复内容开始--- 随笔记录scala中,有哪些类,如何定义一个类,有哪些注意点. 一,scala中有哪些类? 1,简单类 class 2,单例模式 object 3,伴生类 4,case cl ...

  6. SQL Server 【附】创建"商品管理数据库"、"学生选课数据库"的SQL语句

    附:(创建“商品管理数据库”的SQL语句) --建立"商品管理数据库"数据库-- create database 商品管理数据库 on(name='商品管理数据库_m', file ...

  7. 13 Balls Problem

    今天讨论的是称球问题. No.3 13 balls problem You are given 13 balls. The odd ball may be either heavier or ligh ...

  8. 学Android开发，入门语言java知识点

    学Android开发,入门语言java知识点 Android是一种以Linux为基础的开源码操作系统,主要使用于便携设备,而linux是用c语言和少量汇编语言写成的,如果你想研究Android,就去学 ...

  9. mysql 允许远程访问

    原来装mysql数据库的时候就想,这个只要在本地访问就可以了,没有必要让远程访问.可是,今天想把数据放到远程的机器上,却发现,不是简单的将sql语句(指导出的语句)执行一遍就行了,对于那些自增的字段, ...

  10. android 术语

    Context : 是android 应用程序的 中央控制中心.所有应用程序特有的功能通过context 进行访问. Activity: 一个 Android 应用有若干个 task 任务组成,每个人 ...