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. sqli-labs学习(less-5-less-7)

    先介绍一些函数 count(*) 返回在给定的选择中被选的行数,即结果的数目 报错了,但是union没有出结果?,只是为什么? 原来是这样,这样的话只能用报错注入了 (). 通过floor报错 and ...

  2. 嵌入式C语言自我修养 03：宏构造利器：语句表达式

    3.1 基础复习:表达式.语句和代码块 表达式 表达式和语句是 C 语言中的基础概念.什么是表达式呢?表达式就是由一系列操作符和操作数构成的式子.操作符可以是 C 语言标准规定的各种算术运算符.逻辑运 ...

  3. 8.Generics 泛型(Dart中文文档)

    这篇翻译的不好 如果你看API文档中的数组篇,你会发现类型一般写成List.<...>的写法表示通用类型的数组(未明确指定数组中的数据类型).通常情况泛型类型用E,T,S,K,V表示. W ...

  4. CodeForces 1062E Company

    Description The company \(X\) has \(n\) employees numbered from \(1\) through \(n\). Each employee \ ...

  5. spring学习笔记 星球日one - xml方式配置bean

    ide: idea lib包的导入:http://webcache.googleusercontent.com/search?q=cache:http://zyjustin9.iteye.com/bl ...

  6. LeetCode总结

    LeetCode总结 所有代码见我的github.不过一般leetcode上答案也一大堆,最好还是自己动动手,收获比较大. 100 知识点:递归,二叉树 难度Easy,主要是注意对当p和q均为null ...

  7. Object C学习笔记6-如何在Windows环境搭建Object C开发环境

    1. 安装编译环境 Object C和其他很多语言一样,都需要有一个编译器.Object C 是在GCC下编译的.GCC(GNU Compiler Collection,GNU编译器集合),是一套由 ...

  8. vs2012调试时，抛出异常的等待时间很慢，原来是QQ电脑管家搞的鬼。

    vs2012调试时,抛出异常的等待时间以前都正常,不知什么时候起变得很慢,就是出错以后要等30秒以上才会提示,一直找不到原因. 今天看了一下任务管理器,发现有个QQpcrTP进程(好像是,因为卸载了) ...

  9. centos下安装docker，kubelet kubeadm kubectl

    目录 安装docker 安装命令 安装 kubelet kubeadm kubectl 安装命令 安装docker 安装命令 yum install docker -y 启动 systemctl en ...

  10. Docker 创建虚拟机并且远程链接

    快读创建虚拟机 使用我编辑的镜像(688M) docker run -itd --name=test03 -p 5523:22 registry.cn-beijing.aliyuncs.com/act ...