angularJS學習之路（三十）---自定義指令---templateUrl

阿新 • • 發佈：2019-01-21

第一種寫法：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>
		<div ng-app="myApp">
			<script type="text/ng-template" id="zippy.html">
				<div>
					<h3 ng-click="toggleContent()">{{title}}</h3>
					<div ng-show="isContentVisiable" ng-transclude></div>
				</div>
			</script>
			<input type="text" ng-model="model.title" />
			<br />
			<input type="text" ng-model="model.content" />

			<zippy title="{{model.title}}">
				the content is :{{model.content}}
			</zippy>
		</div>
		<script type="text/javascript" src="../js/angular.min.js"></script>
		<script type="text/javascript" src="../js/templateUrl.js"></script>
	</body>

</html>

第二種寫法是把html放在單獨的html檔案裡面：

<div>
	<h3 ng-click="toggleContent()">{{title}}</h3>
	<div ng-show="isContentVisiable" ng-transclude></div>
</div>

var app = angular.module('myApp', []);

//app.run(function($templateCache) {
//	$templateCache.put("zippy.html", "<div><h3 ng-click="toggleContent()">{{title}}</h3><div ng-show="isContentVisiable" ng-transclude></div></div>")
//});

app.directive('zippy',function ($templateCache) {
	//console.log($templateCache.get("zippy.html"));
	return {
		restrict:'E',
		transclude:true,
		scope:{
			title:'@'
		},
		templateUrl:'../node/templateUrl-zippy.html',
		//template: $templateCache.get("zippy.html"); 
		link: function(scope) {
			scope.isContentVisiable = false;
			scope.toggleContent = function() {
				scope.isContentVisiable = !scope.isContentVisiable;
			};
		}
	}
})

不過這裡因為js目錄是當前的目錄，你的html目錄肯定在另外一個資料夾裡，所以自己記得路徑的問題

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>
		<div ng-app="myApp">
			<!--           
			<script type="text/ng-template" id="zippy.html">
				<div>
					<h3 ng-click="toggleContent()">{{title}}</h3>
					<div ng-show="isContentVisiable" ng-transclude></div>
				</div>
			</script>
			 -->
			<input type="text" ng-model="model.title" />
			<br />
			<input type="text" ng-model="model.content" />

			<zippy title="{{model.title}}">
				the content is :{{model.content}}
			</zippy>
		</div>
		<script type="text/javascript" src="../js/angular.min.js"></script>
		<script type="text/javascript" src="../js/templateUrl.js"></script>
	</body>

</html>

這樣做就使得閱讀程式碼變得更加的容易

第三種寫法：把模板放在執行塊裡面

var app = angular.module('myApp', []);

app.run(function($templateCache) {
	$templateCache.put("zippy.html", '<div><h3 ng-click="toggleContent()">{{title}}</h3><div ng-show="isContentVisiable" ng-transclude></div></div>')
});

app.directive('zippy',function (/*$templateCache*/) {
	//console.log($templateCache.get("zippy.html"));
	return {
		restrict:'E',
		transclude:true,
		scope:{
			title:'@'
		},
		templateUrl:'zippy.html',
		//templateUrl:'../node/templateUrl-zippy.html',
		//template: $templateCache.get("zippy.html"); 
		link: function(scope) {
			scope.isContentVisiable = false;
			scope.toggleContent = function() {
				scope.isContentVisiable = !scope.isContentVisiable;
			};
		}
	}
})

html檔案：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>
		<div ng-app="myApp">
			<!--           
			<script type="text/ng-template" id="zippy.html">
				<div>
					<h3 ng-click="toggleContent()">{{title}}</h3>
					<div ng-show="isContentVisiable" ng-transclude></div>
				</div>
			</script>
			 -->
			<input type="text" ng-model="model.title" />
			<br />
			<input type="text" ng-model="model.content" />

			<zippy title="{{model.title}}">
				the content is :{{model.content}}
			</zippy>
		</div>
		<script type="text/javascript" src="../js/angular.min.js"></script>
		<script type="text/javascript" src="../js/templateUrl.js"></script>
	</body>

</html>

建議還是使用第二種方法

angularJS學習之路（三十）---自定義指令---templateUrl

第一種寫法： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&

Hive學習之路（二十）Hive 執行過程實例分析

cred exe 重復 generator pan hql 語句 color SQ 一、Hive 執行過程概述 1、概述（1） Hive 將 HQL 轉換成一組操作符（Operator），比如 GroupByOperator, JoinOperator 等（2）操

Python小白學習之路（二十）—【打開文件的模式二】【文件的其他操作】

encoding 否則移動換行 tar 循環 color nic true 打開文件的模式（二）對於非文本文件，我們只能使用b模式，"b"表示以字節的方式操作（而所有文件也都是以字節的形式存儲的，使用這種模式無需考慮文本文件的字符編碼、圖片文件的jgp格式、視頻文件的

Python小白學習之路（二十）—【開啟檔案的模式二】【檔案的其他操作】

開啟檔案的模式（二）對於非文字檔案，我們只能使用b模式，"b"表示以位元組的方式操作（而所有檔案也都是以位元組的形式儲存的，使用這種模式無需考慮文字檔案的字元編碼、圖片檔案的jgp格式、視訊檔案的avi格式） rb：　　以位元組方式讀檔案 wb：　　以位元組方式寫檔案ab：　　以位元組方式追加檔案注

angularJS學習之路（十八）---自定義指令執行過程

angularJS中對指令的解析與執行過程是這樣的： · 瀏覽器得到 HTML 字串內容，解析得到 DOM 結構。 · ng 引入，把 DOM 結構扔給 $compile 函式處理

python學習之路（三）使用socketserver進行ftp斷點續傳

def += __init__ con 不存在不為 local 接收 class 最近學習python到socketserver，本著想試一下水的深淺，采用Python3.6. 目錄結構如下： receive_file和file為下載或上傳文件存放目錄,ftp_clie

Android的DatePicker和TimePicker-android學習之旅（三十八）

cursor ini lis drawable textview @+ type pin view DatePicker和TimePicker簡單介紹 DatePicker和TimePicker是從FrameLayout繼承而來。他們都是比較簡單的組件

Spring學習之路（三）bean註解管理AOP操作

spec resource 自定義屬性開始 java framework XML 方法名 jar包在類上面、方法上面、屬性上面添加註解；並用bean來管理；書寫方法：@註解名稱（屬性名稱=值）第一步：導入jar包　　導入spring-aop.jar（spri

初識vue.js，我的學習之路（三）

學習定義我想 red spa pos console gpo con vue之自定義指令像v-if、v-show、等這些都是系統指令，比如說我想寫一個v-color的指令，但是系統是沒有這個指令的，如果我們直接這樣寫肯定會報錯，所以我們下面就需要自定義指令

Python學習之路（三）爬蟲（二）

版權特殊機器人 zhang col 取出 log arch robots 通用爬蟲和聚焦爬蟲根據使用場景，網絡爬蟲可分為通用爬蟲和聚焦爬蟲兩種. 通用爬蟲通用網絡爬蟲是捜索引擎抓取系統（Baidu、Google、Yahoo等）的重要組成部分。主要目

Hive學習之路（三）Hive元數據信息對應MySQL數據庫表

需要 pri from metastore node rom lazy 測試安裝概述 Hive 的元數據信息通常存儲在關系型數據庫中，常用MySQL數據庫作為元數據庫管理。上一篇hive的安裝也是將元數據信息存放在MySQL數據庫中。 Hive的元數據信息在MySQ

Spark學習之路（二十八）分布式圖計算系統

尺度內存底層 mapr 分區 ces 兩個傳遞方式 cat 一、引言　　在了解GraphX之前，需要先了解關於通用的分布式圖計算框架的兩個常見問題：圖存儲模式和圖計算模式。二、圖存儲模式　　巨型圖的存儲總體上有邊分割和點分割兩種存儲方式。2013年，Gra

學習之路（三）淺談：輸出重定向，grep及正則表達式，egrep

grep 地址總線：內存尋址數據總線：傳輸數據控制總線：控制指令 > :輸出重定向（會覆蓋原有內容） >>: 追加重定向（不會覆蓋，追加輸出） 2>: 重定向錯誤輸出 2

Ceph學習之路（三）Ceph luminous版本部署

禁用 spl ted span none deploy ets work ble 1、配置ceph.repo並安裝批量管理工具ceph-deploy [root@ceph-node1 ~]# vim /etc/yum.repos.d/ceph.repo [

webpack學習之路（三）

輸出管理：目前為止我們都是手動地在index.html中引入所有資源，但是一應用開始漸漸變大，在檔名中使用哈西並輸出為多個bundle的時候，專案也會變得難以管理了。因此一些外掛就誕生了。準備：調整一下專案結構： project webpack-demo |- package.json

Linux 學習之路（三）：使用者管理命令詳解

使用者管理命令詳解 useradd [options] USERNAME -u UID(>=500,並且與其他使用者無重複) -g GID(基本組，組必須事先存在) -G GID,… (附加組，組必須事先存在) useradd -G mygroup us

Tecnomatix Plant Simulation 14 學習之路（三）

本篇部落格主要介紹模型建模過程，以及相應的程式碼和邏輯解釋從執行模型的角度來說，首先是初始化 HandlingCost := 0 PartsNo :=0 InitPartsTable --初始化表格 GASequence.delete --刪除GA序列 for var

Flume學習之路（三）Flume的配置方式

dfs- 來源 rep RoCE list 數據日誌 appserver 路徑一、單一代理流配置 1.1　官網介紹 http://flume.apache.org/FlumeUserGuide.html#avro-source 通過一個通道將來源和接收器鏈接。需要列出源

Kafka學習之路（三）Kafka的高可用

中一不同 ive topic 停止工作查找同時 llb fail 一、高可用的由來 1.1　為何需要Replication 在Kafka在0.8以前的版本中，是沒有Replication的，一旦某一個Broker宕機，則其上所有的Partition數據都不可被消費，這

Python之路（三十二）：DjangoModel補充 Django之Model進階的更多操作 Django之Model進階的更多操作

Django之Model進階的更多操作一、欄位 AutoField(Field) - int自增列，必須填入引數 primary_key=True BigAutoField(

angularJS學習之路（三十）---自定義指令---templateUrl

相關推薦