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. 20个编写现代CSS代码的建议

    明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...

  2. .NET 工具类ObjectDumper 打印对象

    // Comes from the LINQ samples provided by Microsoft //Copyright (C) Microsoft Corporation. All righ ...

  3. arcgis对谷歌遥感影像拼接

    对于遥感影像的研究多种多样,有小尺度的也有大尺度的还有多尺度的.可以研究一个城市里的一个区,也可以研究一个省甚至全国范围.当研究的区域比较大的时候,在一幅影像上无法包括研究区的所有范围,那么就需要下载 ...

  4. XHProf中文手册

    目录 导言 XHProf 概况 安装XHProf扩展 使用XHProf进行性能分析 设置XHProf用户界面 在生产环境中使用XHProf注意事项 轻量级采样模式 附加功能 信赖 鸣谢 导言 XHPr ...

  5. 30款最好的 Bootstrap 3.0 免费主题和模板

    Twitter Bootstrap 框架已经广为人知,用于加快网站,应用程序或主题的界面开发,并被公认为是迄今对于 Web 开发的最有实质性帮助的工具之一.在此之前的,各种各样的界面库伴随着高昂的维护 ...

  6. shellinabox基于web浏览器的终端模拟器

    1. Shellinabox介绍 Shellinabox 是一个利用 Ajax 技术构建的基于 Web 浏览器的远程终端模拟器,也就是说安装了该软件之后,服务器端不需要开启 ssh服务,通过 Web  ...

  7. 文法 LL1

    <程序>-><声明列表>|<程序><函数> <声明列表>-><声明>|<声明><声明列表> ...

  8. .net如何向csv添加一列

    using System;using System.Collections.Generic;using System.Drawing;using System.Globalization;using ...

  9. TFS Build Definition And Auto Deploy

    一台build machine上一般只有一个build service[对应一个build controller]来serve一个team project collection,但又workaroun ...

  10. raw,cow,qcow,qcow2镜像的比较

    在linux下,虚拟机的选择方式有很多,比如vmware for linux,virtual box,还有qemu,在以前,使用qemu的人不多,主要是使用起来有些麻烦,但现在随着Openstack的 ...