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. SEO优化上首页之搜索引擎用户需求理解

    经过前面<搜索引擎原理SEO优化上首页之网络蜘蛛Spider>和<搜索引擎原理SEO优化上首页之内容处理与创建索引>介绍,搜索引擎已经完成页面抓取和分析,并把原始页面.索引等信 ...

  2. VB6 XArrayDB | Xarray ReDim 用法

    用法解释 官方解释:http://helpcentral.componentone.com/nethelp/truedblist8/default.htm#!redimmethodxarraydb.h ...

  3. python基础学习1-SET 集合

    # -*- coding:utf-8 -*- set集合 无序不重复的序列 se = {"a","b","c"} #创建SET集合 prin ...

  4. 3832: [Poi2014]Rally

    3832: [Poi2014]Rally 链接 分析: 首先可以考虑删除掉一个点后,计算最长路. 设$f[i]$表示从起点到i的最长路,$g[i]$表示从i出发到终点的最长路.那么经过一条边的最长路就 ...

  5. 洛谷P2973 [USACO10HOL]赶小猪

    https://www.luogu.org/problemnew/show/P2973 dp一遍,\(f_i=\sum_{edge(i,j)}\frac{f_j\times(1-\frac{P}{Q} ...

  6. restful_framework之APIView

    一.安装djangorestframework 方式一:pip3 install djangorestframework 方式二:pycharm图形化界面安装 方式三:pycharm命令行下安装(装在 ...

  7. pycharm安装第三方库失败解决办法

    一.报错信息:[file][Default Settint]---Project Interpreter 点击 搜索suds安装模块报错 解决:依据上图提示找到C:\Program Files\Jet ...

  8. docker 指令

    杀死所有正在运行的容器docker kill $(docker ps -a -q) 删除所有已经停止的容器docker rm $(docker ps -a -q) 删除所有未打 dangling 标签 ...

  9. linux用命令行编译使用函数库

    同步于气象家园日志 from fcode 视频 编译静态链接库   gfortran -c sub.f90 func.f90  产生了func.mod文件.注:mod文件是静态库的接口.如果删掉了fu ...

  10. python3安装与环境配置和pip的基本使用

    本文环境 系统: Windows10 Python版本: 3.6 安装 python安装包下载 可以选择安装版和解压版 安装版一键安装, 安装过程注意选择安装位置, xx To Path选项(勾选), ...