《用AngularJS开发下一代Web应用》指令学习笔记

最新推荐文章于 2018-09-27 09:02:39 发布

zufpy68084

最新推荐文章于 2018-09-27 09:02:39 发布

阅读量613

点赞数 1

本文链接：https://blog.csdn.net/zufpy68084/article/details/38523937

版权

一.指令的作用：实现语义化标签

我们常用的HTML标签是这样的：

      Html代码   
      
    
 <div>  
     <span>目录</span>  
 </div>  

而使用AngularJS的directive（指令）机制，我们可以实现这样的东西

      Html代码   
      
    
 <tabset>  
     <tab title='Home'>  
         <p>Welcome home!</p>  
     </tab>  
     <tab title='Preferences'>  
          <p>Content</p>  
     </tab>  
 <tabset>  

和JSP或者Struts等等框架里面的taglib功能一样，只不过这里是使用JavaScript来实现的。

二.实例1

DirectiveStudy01.html

      Html代码   
      
    
 <html ng-app='app'>  
     <body>  
         <hello></hello>  
     </body>  
     <script src="lib/angular/angular.js"></script>  
     <script src="directive/HelloDirect.js"></script>  
 </html>  

HelloDirect.js

      Js代码   
      
    
 var appModule = angular.module('app', []);  
 appModule.directive('hello', function() {  
     return {  
         restrict: 'E',  
         template: '<div>Hi there</div>',  
         replace: true  
     };  
 });  