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. LOOP AT GROUP语法熟悉

    SELECT * FROM EKKO INTO TABLE @DATA(LT_EKKO) UP TO 100 ROWS. SORT LT_EKKO BY LIFNR ERNAM. LOOP AT LT ...

  2. PostgreSQL内存使用增长观察

    磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面:PostgreSQL内部结构与源代码研究索引页    回到顶级页面:PostgreSQL索引页 [作者 高健@博客园  luckyjackga ...

  3. MFC 消息映射、分派和传递

    几个重要的结构体: struct AFX_MSGMAP { AFX_MSGMAP* pBaseMessageMap; AFX_MSGMAP_ENTRY* lpEntries; } struct AFX ...

  4. cogs468 [NOI2010]超级钢琴

    http://cogs.pro:8080/cogs/problem/problem.php?pid=468 emmmmmm 今天考试爆炸顺便切了这题 这题我肯定不会啦然后看一sol.. 固定一个右端点 ...

  5. Genymotion模拟器安装问题及解决（启动失败，模拟器不能联网）

    安装Genymotion模拟器安装后启动不了,报错: 百度的解决方法是打开VMVBirtualox选中自己的设备点击设置—常规—将版本设置为图中箭头所指的: 但是我这样做的时候发现我的下拉列表中没有6 ...

  6. Kubernetes服务发现之Service详解

    一.引子 Kubernetes Pod 是有生命周期的,它们可以被创建,也可以被销毁,然后一旦被销毁生命就永远结束.通过ReplicationController 能够动态地创建和销毁Pod(列如,需 ...

  7. Unity3D Shader 学习笔记（二）：ShaderLab的结构和基本属性

    (一) ShaderLab: 什么是ShaderLab: Unity3D支持的Shader种类包括: 1.Surface Shader:表面着色器 2.Vertex & Fragment Sh ...

  8. AssetBundle粒度与分配策略

    决定如何将项目内的资源分配到 AssetBundle 是不容易的.简单的规则都很有诱惑性,比如将所有对象都放置到他们自己的 AssetBundle 中或者将所有对象都放到一个 AssetBundle ...

  9. 如何推行Code Review

    这篇文章探讨的是如何在一个没有Code Review习惯的团队里面Code Review. 在进行Code Review的时候,审核人很多时候会对被审核人的代码指手画脚,在评价对方的代码,甚至是在批评 ...

  10. 007 --MySQL索引底层实现原理

    MySQL官方对索引的定义为:索引(Index)是帮助MySQL高效获取数据的数据结构.提取句子主干,就可以得到索引的本质:索引是数据结构. 我们知道,数据库查询是数据库的最主要功能之一.我们都希望查 ...