directive如何在angular中使用?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
一、Directive的使用
angular.module("app",[]).directive("directiveName",function(){
return{
//通过设置项来定义
};
})
二、一个简单的实例
html代码:
<!DOCTYPE html>
<html ng-app='helloApp'>
<body>
<hello></hello>
</body>
<script src="js/angular.min.js"></script>
<script src="js/helloDirective.js"></script>
</html>
js代码:
var appModule = angular.module('helloApp', []);
appModule.directive('hello', function() {
return {
restrict: 'E',
template: '<div>Hello,friends!</div>',
replace: true
};
});
效果截图:
实例解析:
1、restrict:EACM的子集的字符串,它限制directive为指定的声明方式。
E - 元素名称: <my-directive></my-directive>
A - 属性名:<div my-directive=”exp”></div>
C - class名: <div class=”my-directive:exp;”></div>
M - 注释 : <!-- directive: my-directive exp -->
2、默认情况下,directive将仅仅允许通过属性声明,ECA较常用。
template:指令显示的模板内容,一般由html标签和文本组成。通常情况下html内容较简单的情况下使用,模板内容复杂的建议将公共部分抽离到html文件中,使用templateUrl属性。
templateUrl - 与template基本一致,但模版通过指定的url进行加载。因为模版加载是异步的,所以compilation、linking都会暂停,等待加载完毕后再执行。
3、replace:如果设置为true,那么模版将会替换当前元素,而不是作为子元素添加到当前元素中。(注:为true时,模版必须有一个根节点)
上述实例dom节点截图:
三、实例2:关于transclude
修改上面实例代码:
<!DOCTYPE html>
<html ng-app='helloApp' ng-controller="myController">
<body>
<hello>{{myName}}</hello>
</body>
<script src="js/angular.min.js"></script>
<script src="js/helloDirective.js"></script>
</html>
var appModule = angular.module('helloApp', []);
appModule.directive('hello', function() {
return {
restrict: 'E',
template: '<div>Hello,my name is <span ng-transclude></span></div>',
replace: true,
transclude:true
};
});
效果截图:
解析:
transclude:指令的作用是把我们自定义的语义化标签替换成浏览器能够认识的HTML标签。上述例子replace设置为true,模版将会替换当前元素。而transclude设置为true的作用可以简化地理解成:把<hello>标签替换成我们所编写的HTML模板,但是<hello>标签内部的内容保持不变。而<span ng-transclude></span>则是指明标签内部内容插入到模板内容的哪个位置。
四、实例3:关于compile,link和controller
实例代码:
phonecatDirectives.directive('exampleDirective', function() {
return {
restrict: 'E',
template: '<p>Hello {{number}}!</p>',
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
<body ng-app="phonecatApp">
<div ng-controller="directive2">
<example-directive></example-directive>
</div>
</body>
运行结果:
Hello 1111 22222 44444 55555!
由结果可以看出来,controller先运行,compile后运行,link不运行。
将上例中的compile注释掉的运行结果:
Hello 1111 22222 33333!
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注天达云行业资讯频道,感谢您对天达云的支持。