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. nginx 配置全站404（百度闭站保护）

    在百度站长里申请闭站保护时,需要全站404.可能过nginx配置实现 location / {   #root html;   #index index.html index.htm;   retur ...

  2. WKWebView _WebFilterIsActive returning: NO

    写这篇文是因为在UIWebView加载页面的时候有时候会返回: filterBlacklist = ( ); filterWhitelist = ( ); restrictWeb = 1; useCo ...

  3. 用JS实现九九乘法表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 仿google art图片预览算法及demo（iphone/安卓版本）

    演示地址:用手机扫描二维码(手机端浏览) 功能:双击放大,单指操作拖动,双指操作放大缩小.

  5. Postgresql-xl 调研

    Postgresql-xl 调研 来历 这个项目的背后是一家叫做stormDB的公司.整个代买基于postgres-xc.开源版本应该是stormdb的一个分支. In 2010, NTT's Ope ...

  6. html5 定位 获得当前位置的经纬度

    if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition, showError, { // ...

  7. linux top命令中各cpu占用率含义

    linux top命令中各cpu占用率含义 [尊重原创文章摘自:http://www.iteye.com/topic/1137848]0.3% us 用户空间占用CPU百分比 1.0% sy 内核空间 ...

  8. redhat yum 从 iso 安装

    背景: 1)yum 在没有注册的redhat中无法使用,不能去自动搜索redhat的库 2)使用者不能上网 方法摘自网络,就是下载ISO文件,yum的下载点指向ISO的mount后(也就是解压缩)的目 ...

  9. php:微信公众号token验证失败原因、验证码显示不出来的问题

    ob_clean(); 问题描述: 用微信官方提供的demo验证token是成功的,但是放到自己网站的框架上进行token验证老是提示"token验证失败",经过检查(用生成日志的 ...

  10. Activiti开发环境配置

    Ubuntu安装 1.下载Ubuntu安装镜像 http://www.ubuntu.com/download/ 2.制作ISO U盘安装镜像  不能用Ultraiso制作U盘启动镜像,新版的Ubunt ...