directive如何在angular中使用-创新互联
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的作用可以简化地理解成:把
四、实例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
运行结果:
Hello 1111 22222 44444 55555!
由结果可以看出来,controller先运行,compile后运行,link不运行。
将上例中的compile注释掉的运行结果:
Hello 1111 22222 33333!
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联网站建设公司行业资讯频道,感谢您对创新互联建站的支持。
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、建站服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
标题名称:directive如何在angular中使用-创新互联
网址分享:http://myzitong.com/article/ddipjs.html