成都网站建设设计

将想法与焦点和您一起共享

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  }; });

效果截图:

directive如何在angular中使用

实例解析:

1、restrict:EACM的子集的字符串,它限制directive为指定的声明方式。

  1. E - 元素名称:

  2. A - 属性名:

  3. C - class名:

  4. M - 注释 :

2、默认情况下,directive将仅仅允许通过属性声明,ECA较常用。

template:指令显示的模板内容,一般由html标签和文本组成。通常情况下html内容较简单的情况下使用,模板内容复杂的建议将公共部分抽离到html文件中,使用templateUrl属性。

templateUrl - 与template基本一致,但模版通过指定的url进行加载。因为模版加载是异步的,所以compilation、linking都会暂停,等待加载完毕后再执行。

3、replace:如果设置为true,那么模版将会替换当前元素,而不是作为子元素添加到当前元素中。(注:为true时,模版必须有一个根节点)

上述实例dom节点截图:

directive如何在angular中使用

三、实例2:关于transclude

修改上面实例代码:



 
  {{myName}}
 

 
 

var appModule = angular.module('helloApp', []);
appModule.directive('hello', function() {
 return {
  restrict: 'E',
  template: '
Hello,my name is 
',   replace: true,   transclude:true  }; });

效果截图:

directive如何在angular中使用

directive如何在angular中使用

解析:

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            
 

运行结果:

Hello 1111 22222 44444 55555!

由结果可以看出来,controller先运行,compile后运行,link不运行。

将上例中的compile注释掉的运行结果:

Hello 1111 22222 33333!

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联网站建设公司行业资讯频道,感谢您对创新互联建站的支持。

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、建站服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


分享文章:directive如何在angular中使用-创新互联
当前网址:http://chengdu.cdxwcx.cn/article/ddipjs.html

其他资讯