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. django的类视图-11

    目录 1. 使用类视图 创建类视图 注册路由 类视图使用装饰器 在url中装饰 在类视图中装饰 method_decorator 的 name 参数 使用Mixin扩展类 使用函数方式定义的视图叫函数 ...

  2. Flume定时启动任务 防止挂掉

    一,查看Flume条数:ps -ef|grep java|grep flume|wc -l       ==>15 检查进程:给sh脚本添加权限,chmod 777 xx.sh #!/bin/s ...

  3. angularjs compile vs link

    https://docs.angularjs.org/guide/directive https://docs.angularjs.org/api/ng/service/$compile https: ...

  4. 【python3】爬取简书评论生成词云

    一.起因: 昨天在简书上看到这么一篇文章<中国的父母,大都有毛病>,看完之后个人是比较认同作者的观点. 不过,翻了下评论,发现评论区争议颇大,基本两极化.好奇,想看看整体的评论是个什么样, ...

  5. 2_C语言中的数据类型 （二）进制

    1.1       二进制数.位.字节与字 我们习惯于十进制的数:10,12等 一个位只能表示0,或者1两种状态,简称bit,一个位是一个bit 一个字节为8个二进制,称为8位,简称BYTE,8个比特 ...

  6. idea web项目debug模式实时更新按钮不生效原因

    必须两个都开启才能生效,单按按钮不能生效,但是有时候自动更新不生效的时候按按钮后可以生效, 如果前端目录或后端内容实在不更新,就删掉out目录和target目录,重新启动服务器即可

  7. Python函数之总结

    ''' 1.什么是函数 函数就是具备某一特定功能的工具 2.为什么用函数 减少重复代码 增强程序的扩展性 增强可读性 3.如何用函数 1.函数的使用原则:先定义后调用(*****) 定义阶段:只检测语 ...

  8. SQL Server 任务调度

    SQL Server 内部集成了一个专用的操作系统,叫做SQLOS,处于SQL Server和Windows的中间层.SQLOS是一个协同式的多任务调度系统,使用非抢占式争用资源,用于管理线程调度.I ...

  9. javaweb学习6——自定义标签

    声明:本文只是自学过程中,记录自己不会的知识点的摘要,如果想详细学习JavaWeb,请到孤傲苍狼博客学习,JavaWeb学习点此跳转 本文链接:https://www.cnblogs.com/xdp- ...

  10. HTML文件转Word文件格式

    这是我需要转换的HTML文件 第一步~ 使用我们的福昕阅读器将我们.html文件打开,如下图 第二步: 点击“文件”——“另存为”——选择一个你自己喜欢的位置存放文件,此时的文件已经被转换成了.pdf ...