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. Verilog 奇数分频

    代码: module odd_div( ); ; //分频系数,3即3分频 ; reg clk, rstn, clk_div_pos, clk_div_neg; wire clk_div_out; : ...

  2. # 2017-2018-1 20155302 课下实践IPC及课上补充

    课上实践补交 题目二要求: 学习使用stat(1),并用C语言实现 提交学习stat(1)的截图 man -k ,grep -r的使用 伪代码 产品代码 mystate.c,提交码云链接 测试代码,m ...

  3. 【python3】拷贝U盘文件

    一.起因 前天在公众号上,看到一篇如何用python偷偷拷贝别人U盘内容的文章推送,感觉这个想法挺有意思的,可惜是用的是linux系统,而且移动硬盘的盘符也是写死的,不够灵活,于是就自己动手写了一个d ...

  4. mfc 函数重载

    函数重载的概念 for循环中变量 一. 函数重载的概念 函数重载允许我们使用相同的函数名定义多个函数. 提示: 函数参数类型不同,可重载. 类型相同时,则需要参数个数不同. int max(int a ...

  5. 3530: [Sdoi2014]数数

    3530: [Sdoi2014]数数 链接 分析: 对给定的串建立AC自动机,然后数位dp.数位dp的过程中,记录当前在AC自动机的哪个点上,保证不能走到出现了给定串的点. 代码: #include& ...

  6. Redis学习之路（一）之缓存知识体系

    转自:https://www.unixhot.com/page/cache 缓存分层 缓存分级 内容 内容简介/主要技术关键词 用户层 DNS 浏览器DNS缓存 Firefox默认60秒,HTML5的 ...

  7. CodeForces 915D Almost Acyclic Graph

    Description You are given a directed graph consisting of \(n\) vertices and \(m\) edges (each edge i ...

  8. 微服务介绍及Asp.net Core实战项目系列

    0.目录 整体架构目录:ASP.NET Core分布式项目实战-目录 二.目录 0.微服务介绍 1.RESTful API 规范介绍 2.asp.net core介绍及swagger使用 3.asp. ...

  9. Restful和WeBAPI学习笔记

    1.restful是基于无状态的,所谓无状态就是说客户端和服务端的每次通话都是独立的,不存在session和cookie之类的保存状态的机制,基于该协议可实现简单的curd操作, 其操作分为get\p ...

  10. java随记

    jdk1.8中新增了 LocalDate 与 LocalDateTime等类来解决日期处理方法,同时引入了一个新的类DateTimeFormatter来解决日期格式化问题. LocalDateTime ...