自定义指令

这里虽然带了指令二字,但是它与 angular 中的指令是两个概念的东西

directive 命名

自定义指令需要使用驼峰法来命名, 如定义一个指令为 firstTest, 但在使用它时需要以 - 分割, first-test

Basis

<div ng-app="myApp" ng-controller="myAppCon">
	<!-- 使用自定义指令 -->
	<div class="first-test"></div>
</div>
<script>
var app = angular.module('myApp', []);
app.directive("firstTest", function() {
	return {
		restrict : "EAC",
		template : "<p>第一个自定义指令!</p>"
	};
});

app.controller('myAppCon', ['$scope',function($scope) {
}]);
</script>

更多配置

<div ng-app="myApp" ng-controller="myAppCon">
	<!-- 使用自定义指令 -->
	<div class="first-test"></div>
</div>
<script>
var app = angular.module('myApp', []);
app.directive("firstTest", function() {
	return {
		restrict : "EAC",
		templateUrl : "/html/path/xxxx.html",
		controller : ["$scope",function($scope){

		}]
	};
});

app.controller('myAppCon', ['$scope',function($scope) {
}]);
</script>
名称 说明
restrict 定义指令以某种形式使用
template 指令的视图模版
templateUrl 指令的视图模版静态文件地址
controller 指令的控制器

restrict

名称 说明
E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用