angularjs directive (自定義標簽解析)

定義tpl

<!-- 注意要有根標簽 -->
<div class="list list-inset">
  hello，
  {{searchField}}
</div>  

定義directive

angular.module('AppDirective', [])
//directive 必須使用駝峰命名 UI引用時使用 - 鏈接
.directive("appSearch", ['AppConstant', function (AppConstant) {
	return {
        /*
	    	其他屬性配置:
	    	priority
	    		在同一個DOM元素有多個directive定義時，可以指定執行順序
			terminal
				在同一個DOM元素有多個directive定義時，該屬性設為true,則最后執行
		    require 
		    	引入其他controller
		    	
		    	require(前綴 + 'controllerName')
				
				前綴：(可以不加)
	             ? – 不要拋出異常。這使這個依賴變為一個可選項。
	             ^ – 允許查找父元素的controller
	    */

		/*
			restrict:
				E – 元素名稱： <app-search></app-search>
			    A – 屬性名： <div app-search></div>
			    C – class名： <div class="app-search"></div>
			    M – 注釋 ： <!-- directive:app-search -->  (使用M要把replace設為true)
			
			可以同時設多個eg: 
				restrict : "AECM",
		*/
        restrict : "E",
        //replace 如果設置為true將會替換當前元素，否則將作為子元素添加到當前元素中。
        replace : true,
        /*
        	scope
		 		true:創建一個新的scope。如果在同一個元素中有多個directive都設為true 也只會創建一個scope。
		        {}:創建一個新的、獨立的,拷貝父scope 的 scope(不會影響到父scope)
        */
        scope: {
        	//UI設置這屬性也要轉換為 - 連接
        	searchField: '=searchFieldModel'
        },
        // template:'<div>Hello</div>'
        templateUrl: 'directive/app-search.html',
        /*
	    controller 屬性:
		    $scope – 與當前元素結合的scope
			$element – 當前的元素
			$attrs – 當前元素的屬性對象
			$transclude 
        */
        controller: ['$scope', function($scope){
        	console.log($scope.searchField);
        }],
        // compile 和 link 不能同時使用
        link: function(scope, el, att){
        	console.log(att.appSearch);
        }
	}
}]);

引入標簽模塊

    angular.module('app', ['ionic', 'app.controllers','AppDirective'])

使用標簽

<!--對應4種方法-->
<!-- directive:app-search --> 
<app-search search-field-model="data.searchType"></app-search>
<div app-search ></div>
<div class="app-search"></div>