index.html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

</head>

<body>

<div ng-app="myApp">

    <script type="text/ng-template" id="customTags2">

       <div>

           hello{{name}}

       </div>

    </script>

    <div ng-controller="firstController">

        <custom-tags></custom-tags>

        <custom-tags2></custom-tags2>  <!--此处会去渲染script标签的模板-->

    </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>

　　other.html:

<div>我是其他文件 {{name}}</div>

　　index.js:

var myApp = angular.module('myApp', [],['$compileProvider',function ($compileProvider) {

    $compileProvider.directive('customTags',function () {

        return {

            restrict:"ECAM",

            templateUrl:'temp/other.html',

            replace:true  //如果此配置为true则替换指令所在的元素 如果为false或者不指定 则把当前指令追加到所在元素的内部

        }

    })

}])

    .directive('customTags2',function () {

        return{

            restrict:"ECAM",

            templateUrl:"customTags2",  //对应为type="text/ng-template" 指定script的标签id

            replace:true

        }

    })

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

        $scope.name = "张三"; //赋值

    }]);

　　运行结果:

angularJS1笔记-(10)-自定义指令(templateUrl属性)的更多相关文章

  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笔记-(9)-自定义指令(restrict/template/replace)

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

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

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

  5. angularJS1笔记-(12)-自定义指令(compile/link)

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

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

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

  7. AngularJs学习笔记3——自定义指令

    指令 概述: 前面也说过一些常用指令,用于快速入门.现在详细总结一下:指令用于实现各种页面的操作,是对于底层DOM操作的封装,扩展了HTML的行为,实现页面交互以及数据绑定. 指令是一种执行的信号,一 ...

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

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

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

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

随机推荐

  1. 2017-2018-1 20155231 课堂测试 （ch06）

    2017-2018-1 20155231 课堂测试 (ch06) 1 (单选题|1分) 下面代码中,对数组x填充后,采用直接映射高速缓存,所有对x和y引用的命中率为(D) A .1 B .1/4 C ...

  2. MySQL下查看和赋予权限

    磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面: PostgreSQL杂记页     回到顶级页面:PostgreSQL索引页 [作者 高健@博客园  luckyjackgao@gmail. ...

  3. jQuery学习-基本选择器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. 【HNOI2015】实验比较

    题面 题解 首先将所有相等的用并查集缩点,然后会发现题目有一个很有用的性质: 对每张图片\(i\),小D都最多只记住了某一张质量不比\(i\)差的另一张图片\(K_i\). 于是将\(K_i\)作为\ ...

  5. 【HNOI2013】游走

    题面 题解 图上的期望大部分是\(dp\),无向图的期望大部分是高斯消元 设\(f[i]\)表示走到点\(i\)的期望,\(d[i]\)表示\(i\)的度,\(to(i)\)表示\(i\)能到达的点集 ...

  6. JDBC注册驱动的三种方式(MySQL)

    第一种:通过反射Class.forName("com.mysql.jdbc.Driver"); 第二种:通过DriverManage的静态方法DriverManager.regis ...

  7. 轻量级企业私有云 JimV 分享

    当前云市场分析 云分两种,公有云.私有云.目前市面上的云产品,对于中小规模的企业来讲,痛点有如下几点: 私有云: 1.VMware ESXi 类: a) 授权费用昂贵: b) 创建虚拟机费时费力: 2 ...

  8. $.post(url,[data],[callback],'json')

    $.post(url,[data],[callback],'json')这个写法来做到用post方法传递数据,并取加回json型数据.如果我要取回的数据类型是xml的,就可以写成$.post(url, ...

  9. 阿里云Linux的mysql安装，使用yum安装

    1.下载 我下载的mysql5.7 rpm格式的,在Linux的根目录下下载(防止出现安装的问题) wget https://dev.mysql.com/get/mysql57-community-r ...

  10. Mac OS下Appium环境搭建及Genymotion模拟器安装

    说明:本机Mac本上已经安装的有:Python3.JDK.Node.js. Selenium Appium环境搭建 Step1:安装Appium Python Client库 1,命令:pip ins ...