directive如何在angular中使用？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：
域名注册、
虚拟主机、营销软件、网站建设、
东港网站维护、网站推广。
一、Directive的使用
angular.module("app",[]).directive("directiveName",function(){
return{
//通过设置项来定义
};
})二、一个简单的实例
html代码：
js代码：
var appModule = angular.module('helloApp', []);
appModule.directive('hello', function() {
return {
restrict: 'E',
template: 'Hello,friends!
',
replace: true
};
});效果截图：
实例解析：
1、restrict：EACM的子集的字符串，它限制directive为指定的声明方式。
E - 元素名称：
A - 属性名：
C - class名：
M - 注释 ：
2、默认情况下，directive将仅仅允许通过属性声明，ECA较常用。
template：指令显示的模板内容，一般由html标签和文本组成。通常情况下html内容较简单的情况下使用，模板内容复杂的建议将公共部分抽离到html文件中，使用templateUrl属性。
templateUrl - 与template基本一致，但模版通过指定的url进行加载。因为模版加载是异步的，所以compilation、linking都会暂停，等待加载完毕后再执行。
3、replace：如果设置为true，那么模版将会替换当前元素，而不是作为子元素添加到当前元素中。（注：为true时，模版必须有一个根节点）
上述实例dom节点截图：
三、实例2：关于transclude
修改上面实例代码：
{{myName}}
var appModule = angular.module('helloApp', []);
appModule.directive('hello', function() {
return {
restrict: 'E',
template: 'Hello,my name is
',
replace: true,
transclude:true
};
});
效果截图：
解析：
transclude：指令的作用是把我们自定义的语义化标签替换成浏览器能够认识的HTML标签。上述例子replace设置为true，模版将会替换当前元素。而transclude设置为true的作用可以简化地理解成：把标签替换成我们所编写的HTML模板，但是标签内部的内容保持不变。而则是指明标签内部内容插入到模板内容的哪个位置。
四、实例3：关于compile，link和controller
实例代码：
phonecatDirectives.directive('exampleDirective', function() {
return {
restrict: 'E',
template: 'Hello {{number}}!
',
controller: function($scope, $element){
$scope.number = $scope.number + "22222 ";
},
link: function(scope, el, attr) {
scope.number = scope.number + "33333 ";
},
compile: function(element, attributes) {
return {
pre: function preLink(scope, element, attributes) {
scope.number = scope.number + "44444 ";
},
post: function postLink(scope, element, attributes) {
scope.number = scope.number + "55555 ";
}
};
}
}
});
//controller.js添加
dtControllers.controller('directive2',['$scope',
function($scope) {
$scope.number = '1111';
}
]);
//html
