index.html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

</head>

<body>

<div ng-app="myApp">

    <div  ng-controller="firstController">

        <div ng-repeat="user in users" custom-tags><a href="www.baidu.com">baidu</a></div>

    </div>

</div>

<script type="text/javascript" src="../../vendor/angular/angularJs.js"></script>

<script type="text/javascript" src="app/index.js"></script>

<script>

</script>

</body>

</html>

　　index.js:

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

    .directive('customTags',function () {

        return{

            restrict:"ECAM",

            template:"<div>aaa<span ng-transclude></span></div>",

            replace:true,

            transclude:true,

            compile:function (tElement,tAttrs,transclude) {

                console.log(tElement);

                console.log(tAttrs);

                console.log('customTags compile');

                console.log("你好，我是编译阶段的方法"); //在编译阶段只执行一次

                return function () {

                    console.log('compile return function')

                }

            }

        }

    })

    .controller('firstController',['$scope',function ($scope) {

        $scope.users = [

            {

                id:10,

                name:'张三'

            },

            {

                id:20,

                name:'李四'

            }

        ];

    }]);

　　运行结果:

angularJS1笔记-(12)-自定义指令(compile/link)的更多相关文章

  1. angularJS1笔记-(11)-自定义指令(transclude/priority/terminal)

    自定义指令的属性 transclude:为true时,允许把html中新定义的指令中原来的dom运用到该指令的template中. 属性priority,设置该指令的优先级,优先级大的先执行,默认指令 ...

  2. angularJS1笔记-(15)-自定义指令(accordion伸缩菜单原始实现)

    index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  3. angularJS1笔记-(13)-自定义指令(controller和controllerAs实现通信)

    index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  4. angularJS1笔记-(10)-自定义指令(templateUrl属性)

    index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  5. angularJS1笔记-(9)-自定义指令(restrict/template/replace)

    index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  6. angularJS1笔记-(14)-自定义指令(scope)

    index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  7. angular学习笔记(三十)-指令(5)-link

    这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...

  8. AngularJS学习笔记(四) 自定义指令

    指令(directive)是啥?简单来说就是实现一定功能的XXX...之前一直用的ng-model,ng-click等等都是指令.当我有一个ng没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...

  9. Vue笔记--通过自定义指令实现按钮操作权限

    经常做中后台系统,此类系统的权限是比较重要,拿自己做过的一些项目做个笔记. Vue实现的中后台管理系统.按钮操作权限的空置一般都是通过自定义指令Vue.directive. <el-button ...

随机推荐

  1. C 共享内存封装

    引言 - 背景 2016 年写过一篇关于 linux 共享内存 shm api 扫盲文. C扩展 从共享内存shm到memcache外部内存 比较简单. 没有深入分析(能力有限, 也深入分析不了). ...

  2. Kali-linux本地权限提升

    上一节介绍了窃取目标系统令牌,现在来介绍窃取令牌后如何提升在目标系统上的权限.提升本地权限可以使用户访问目标系统,并且进行其他的操作,如创建用户和组等.本节将介绍本地权限提升. 同样的实现本地权限提升 ...

  3. linux java jdk环境变量设置之后,依旧提示 No such file or directory

    今天又默默的在linux下安装java 明明是很简单的事情,在~/.bashrc中添加如下内容: export JAVA_HOME=/home/ubuntu/jdkexport CLASSPATH=. ...

  4. c++ 二叉树的遍历

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <ctype.h> ...

  5. 洛咕 P2468 [SDOI2010]粟粟的书架

    强行二合一啊... 前面直接二分最小值,二维前缀和.后面用主席树查最小值.注意要写\(nlogn\). // luogu-judger-enable-o2 #include<bits/stdc+ ...

  6. css绘制常见的几何图形

    前言:终于我的大一生活结束了,迎来了愉快的暑假,大家都开始了各自的忙碌.一直忙着一些项目的事情,终于决定今天要更新一篇博客了,对上一阶段的学习做简单的总结. 这次我主要总结一下用Css绘制各种形状的技 ...

  7. 《数据结构与算法图解》 分享 pdf下载

    链接:https://pan.baidu.com/s/1gOMlwU5ucHYDVazvVMk2uw提取码:bk5x

  8. 012-- mysql的分区和分表

    分区 分区就是把一个数据表的文件和索引分散存储在不同的物理文件中. mysql支持的分区类型包括Range.List.Hash.Key,其中Range比较常用: RANGE分区:基于属于一个给定连续区 ...

  9. ubuntu添加国内源

    安装Ubuntu 18.04后,使用国外源太慢了,修改为国内源会快很多. 修改阿里源为Ubuntu 18.04默认的源 备份/etc/apt/sources.list#备份cp /etc/apt/so ...

  10. 高可用OpenStack（Queen版）集群-11.Neutron计算节点

    参考文档: Install-guide:https://docs.openstack.org/install-guide/ OpenStack High Availability Guide:http ...