AngularJS自定義指令標籤

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

建立一個模組

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

建立一個簡單指令標籤

app.directive('alert', function(){
   return {
	template: '<div class="alert">' +
		     '<span class="alert-topic">' +
		        'something went wrong!' +
		     '</span>' +
		     '<span class="alert-description">' +
		        'You must inform the plate and the color of the car!' +
		     '</span>' +
		   '</div>'
   };
});

使用templateUrl，建立指令標籤

app.directive('alert', function(){
	return {
		templateUrl: 'template/alert.html'
	};
});

template目錄下alert.html程式碼如下：

<div class="alert">
	<span class="alert-topic">
		Something went wrong!
	</span>
	<span class="alert-description">
		You must inform the plate and the color of the car!
	</span>	
</div>

replace屬性，控制是否替換原來的標籤元素: true/false

restrict屬性，宣告指令標籤以何種方式出現在HTML標籤中。

如下示例：

<!DOCTYPE html>
<html ng-app="app">
	<head>
		<meta charset="utf-8">
		<title>Demo</title>
	</head>
	<body>
		<alert></alert>
		<script src="js/angular/angular.min.js"></script>
		<script>
			var app = angular.module('app', []);
			app.directive('alert', function(){
				return {
					templateUrl: 'template/alert.html',
					replace: true,
					restrict: 'E'
				};
			});
		</script>
	</body>
</html>

可以同時使用‘AECM’中的多個或全部。

scope屬性

前面將自定義指令標籤的內容通過硬編碼的形式直接寫在模板裡，這種方式有其侷限性。

而通過scope屬性，可以將指令標籤顯示的內容與模板分離，然後通過繫結的方式將其關聯起來。如下：

（1）JS部分：

var app = angular.module('app', []);
app.directive('alert', function(){
 	return {
		templateUrl: 'template/alert.html',
		replace: true,
		restrict: 'E',
		scope: {
			topic: '@topic',
			description: '@description'
		}
	};
});

（2）alert.html模板部分

<div class="alert">
	<span class="alert-topic">
		<span ng-bind="topic"></span>
	</span>
	<span class="alert-description">
		<span ng-bind="description"></span>
	</span>	
</div>

（3）在頁面中使用該標籤例項：

<alert topic="Action!" description="You must inform the plate and the color of the car!"></alert>

AngularJS自定義指令標籤

建立一個模組 var app = angular.module('app', []);建立一個簡單指令標籤app.directive('alert', function(){ return { template: '<div class="alert">

AngularJs自定義指令詳解（5） - link

演示 hang cursor off drag font 雙向事件 date 在指令中操作DOM，我們需要link參數，這參數要求聲明一個函數，稱之為鏈接函數。寫法： link: function(scope, element, attrs) {　　// 在這裏操作DO

AngularJS自定義指令directive：父類scope和指令中scope之間的通訊

我們知道angularJs中，指令中有scope，父類controller中也有scope，兩者的通訊方式有三中，分別是 scope：false；直接使用父類的scope scope：true；繼承父類的scope scope：｛@，=，&｝隔離的s

AngularJS自定義指令directive：scope屬性

一、介紹：在AngularJS中，除了內建指令如ng-click等，我們還可以自定義指令。自定義指令，是為了擴充套件DOM元素的功能。程式碼中，通過指定directive中的restrict屬性，來決定這個指令是作為標籤（E）、屬性（A）、屬性值（C）、

angularjs自定義指令

app.directive('nameunique', function($http) { return { require: 'ngModel',//require代表另一個指令的名字，它將會作為link函式的第四個引數

angularJs自定義指令的三種繫結策略

angularJs中指令scope隔離域中有3種繫結策略: .directive("test",function(){ return { scope:{

angularJs自定義指令父子指令通訊

老規矩，先上效果圖：首先說一下本文的重點：1、父指令如何呼叫子指令中的方法；2、子指令如何呼叫父指令中的方法；（都不是通過廣播的方式）如果有同學還不知道父指令如何通過[email protected]&給子指令傳遞引數，或者一些其他自定義指令的屬性（scop

angularJS 自定義指令

angularJS 自定義屬性類似於過濾器filter，內建了許多方法同時可以自定義方法。通過angular.model來建立模組物件： -angular.model: controlle

AngularJs自定義指令詳解

定義指令的方法：angular.module('myApp', []) .directive('myDirective', function () { // 指令定義放在這裡 }); 第一個引數，指令的名字myDirective 用來在檢視中引用特定的指令。第二

AngularJS自定義Echarts標籤 — 折線圖Line

很多時候資料都要用圖表的形式來展示，Echarts就是一款開源、功能強大的圖表工具，但有些圖表只是資料不同，不可能每一個圖都單獨畫一個，所以我就考慮能不能把它封裝起來？這使我瞄準了剛接觸的Angula

AngularJs學習筆記（4）——自定義指令

ref 告訴 ack 生命周期 .com bsp ctrl 參數變量 ng- 對指令的第一印象：它是一個自定義標簽！先來看一個簡單的指令： <!doctype html> <html ng-app="myApp"> <head>

angularJS中如何寫自定義指令

module ren gif 發送郵件 www amp 提前 ras instance 指令定義 (轉自http://www.cnblogs.com/huangshikun/p/7060787.html) 對於指令,可以把它簡單的理解成在特定DOM元素上運行的函數,指令

Angularjs進階筆記（2）-自定義指令中的數據綁定

粘貼文章發送制作取值不同的過多簡單也會 Angularjs進階筆記（2）-自定義指令中的數據綁定有關自定義指令的scope參數，網上很多文章都在講這3種綁定方式實現的效果是什麽，但幾乎沒有人講到底怎麽使用，本篇希望聊聊到底怎麽用這個話題。一. 自定義

angularjs的自定義指令及其呼叫方式

<body ng-app="myApp"> <runoob-directive></runoob-directive> <script> var a

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

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

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

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

如何在angularjs的自定義指令內部定義自定義過濾器？

今天下班碰到之前的小學妹，看她今天很是煩躁，我們就溝通了一下，原來是上學的時候沒有學好AngularJS，有很多不懂的問題，她問了我一個問題，就是怎麼使用自定義過濾器？一聽到這個問題，我就有得說了，

AngularJS 優雅的自定義指令

學習要點為什麼使用指令建立自定義指令使用jqLite工作一、為什麼使用自定義指令 NG內建了許多自定義指令，但是它們有時並不能滿足你的要求，這是需要我們建立自定義屬性。二、自定義

angularjs 1.x自定義指令之控制器與指令間的通訊

一、在指令中呼叫控制器裡定義的方法 //html <div ng-controller="MyCtrl"> <loader howToLoad="loadData

angular創建自定義指令的四種方式

htm mil 成功評論 utf-8 例如 angularjs size 限制　　angular除了內置的部分指令，還可以通過.directive來自定義指令。要調用自定義指令，HTML 元素上需要添加自定義指令名。使用駝峰法來命名一個指令：nsHeader，在調用時使

AngularJS自定義指令標籤

相關推薦