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. 《The C Programming Language》读书笔记（一）

    1. 对这本书的印象 2011年进入大学本科,C语言入门书籍如果我没记错的话应该是谭浩强的<C程序设计>,而用现在的眼光来看,这本书只能算是一本可用的教材,并不能说是一本好书.在自学操作系 ...

  2. SEO优化上首页之搜索引擎作弊案例与反作弊原理

    搜索引擎流量价值巨大,有不少人专门研究排名机制,利用搜索引擎漏洞作弊,寻求快速提高网站排名,进而获取更多的流量和利益,甚至有的网站优化公司专门提供作弊服务.搜索引擎为了杜绝这种情况,必须能过滤大量垃圾 ...

  3. 20155207王雪纯 Exp2 后门原理与实践

    20155207王雪纯 Exp2 后门原理与实践 实验步骤 一.windows获取Linux shell Windows:使用 ipconfig 命令查看当前机器IP地址. 进入ncat所在文件地址, ...

  4. 对control file的学习笔记

    SQL> startup nomount;startup nomount;ORACLEインスタンスが起動しました. Total System Global Area 521936896 byte ...

  5. 实战中的asp.net core结合Consul集群&Docker实现服务治理

    0.目录 整体架构目录:ASP.NET Core分布式项目实战-目录 一.前言 在写这篇文章之前,我看了很多关于consul的服务治理,但发现基本上都是直接在powershell或者以命令工具的方式在 ...

  6. mongodb原生node驱动

    写在前面 最近读<node.js学习指南>,对于mongodb没有介绍太多的工作原理,但是对于一个前端开发者,即使你还没有用过这种数据库也可以让你很好的理解和使用       一本非常好的 ...

  7. 安装vs2017后，RDLC 报表定义具有无法升级的无效目标命名空间

    原先的RDLC报表定义用的命名空间是2008,用vs2017报表设计器重新保存后,会自动升级成2016,导致无法使用. 不想升级控件,太麻烦,所以就手动修改RDLC文件吧. 1.修改http://sc ...

  8. 第四篇 HTTP请求返回状态码收集及解释

    [转载]https://blog.csdn.net/wangsen2235068/article/details/8081274 当用户试图通过 HTTP 访问一台正在运行 Internet 信息服务 ...

  9. Mysql优化之索引

    前言 这几天抽了个时间将<高性能Mysql>看了一下忽觉索引非常之重要,习之然后总结巩固知识.本文索引使用的是InnoDB存储引擎.因为本文并不是说用索引的好处,所以并不会书写QPS之类的 ...

  10. 路由器终端常用linux命令汇总（持续更新）

    ls:显示文件名与相关属性 ls -al;ls -l;ls -a 第一列: d:表示目录,dir. -:表示文件. l:表示链接文件,linkfile. 接下来的字符三个为一组,且均为rwx这3个字母 ...