angular自定義指令-1

時間 2019-11-13

原文原文鏈接

一、angular指令感受就至關於寫一個組件，擴展html的語法，好比你寫了一個圖片上產的組件input-image，引用的時候直接用指令引javascript

<input-image ng-model="image_url"></input-image>

用就好css

二、如何寫angular指令，主要就是調用directive方法api，方法內返回一個包裝特定屬性對象html

三、angular指令開始compile結束linkjava

四、從外部像指令傳遞數據，有叫綁定策略，傳遞數據的主要有兩種bootstrap

@綁定和=綁定api

區別：oop

一、@綁定從外部傳遞到內部，內部改變不會反映到外部，=綁定是雙向的，任何一方的改變都會相互影響url

二、@綁定是經過angular表達式{{ }}方式傳遞eg:<my-dir title="{{title}}"></my-dir>,=綁定傳遞值不須要表達式eg:<my-dir title="title"></my-dir>spa

下面寫個簡單的demo說明，rest

模板sometest.html

<div class="p_text">
	<p>
   		 <label>title:{{title}}</label><input type="text" ng-model="title">
	</p>
	<p>
	    <label>text:{{text}}</label><input type="text" ng-model="text">
	</p>
	<button  ng-click="alertTest()">點擊test </button>{{alertTest}}===
</div>

指令定義：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="angular.js"></script>
	<style type="text/css">
		.p_text{
			border: solid 1px red;
		}
	</style>
</head>
	<div ng-controller="testController">
		<input type="text" ng-model="title" placeholder="expr...">
		title:{{ title }}<br/>
		<input type="text" ng-model="text" placeholder="text">
		text:{{text}}<br/>
		<input-test title="{{title}}" text="text" ng-click ="alertTest()"></input-test>
	</div> 
	<script type="text/javascript">
		angular.element(document).ready(function  () {
			var myApp = angular.module('myApp',[],angular.noop);
			myApp.directive('inputTest',function  () {
					return {
				   	    compile: angular.noop, 
			            templateUrl:"sometest.html", 
			            replace: false, 
			            scope: { 
			            	alertTest:'&alertFun',
			                title:'@title' , //directive裏面的title取值爲element屬性titlearr的動態的值{{title}} --注意外部傳遞值的方式與 = 的不一樣{{}}
			                text:'=text'//directive裏面text的取值爲element屬性textarr的值text在element中scope中的值，scope.text --注意外部的傳遞值的方式與@的不一樣 ""
			            },//這裏的=title其實用的是 
			            restrict: 'AE' 
			        }; 
			}).controller('testController',function  ($scope,$parse) {
				$scope.say = "hello worlds!";
				$scope.title = "外部title";
				$scope.text = "外部text";
				$scope.num = 1;
				$scope.alertTest = function  () {
					++$scope.num;
					alert($scope.num);
				}

			});
			angular.bootstrap(document, ['myApp']);
		})
		
	</script>
</body>
</html>

　　下一篇如何使用link和compile定義指令

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。