angular插件制作——Directive指令使用详解

1.replace——最简单的使用方法，直接将自定义标签替换为模板内的内容： 

html：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6             <script type="text/javascript" src="angular.js" ></script>
 7             <script type="text/javascript" src="template.js" ></script>
 8     </head>
 9     <body ng-app="app">
10         <template></template>    
11     </body>
12 </html>

javascipt:

1 var app=angular.module("app",[])
2 app.directive("template",function(){
3     return {
4         restrict: 'E',
5         template: '<div>Hi template</div>',
6         replace: true
7     }
8 })

2. transclude(变换）——将自定义标签替换成我们所编写的HTML模板，但是自定义标签内部的内容会保留在具有ng-transclude指令的标签内：

html:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6             <script type="text/javascript" src="angular.js" ></script>
 7             <script type="text/javascript" src="template.js" ></script>
 8     </head>
 9     <body ng-app="app">
10         <hello>
11             <br>
12             <span>使用transclude，自定义标签内部的内容会被保留在模板标签中具有ng-transclude指令的标签内部</span>
13         </hello>
14         <hello></hello>
15     </body>
16 </html>

javascript:

1 var appModule = angular.module('app', []);
2     appModule.directive('hello', function() {
3     return {
4         restrict: 'E',
5         template: '<div>Hi there <span ng-transclude>这里的内容不会显示，只会显示自定义标签内部的内容</span></div>',
6         transclude: true
7     };
8 });

3. link函数——绑定事件到元素上，一个简单的典型的插件就能实现了

css：

 1 .expander {
 2     border: 1px solid black;
 3     width: 250px;
 4 }
 5 
 6 .expander>.title {
 7     background-color: black;
 8     color: white;
 9     padding: .1em .3em;
10     cursor: pointer;
11 }
12 
13 .expander>.body {
14     padding: .1em .3em;
15 }

html:

 1 var app=angular.module("app",[])
 2 app.directive("temp",function(){
 3     return {
 4         restrict : "EA",
 5         replace : true,
 6         transclude : true,
 7         scope : {
 8             title : '=tempTitle'
 9         },
10         template : '<div>'
11                  + '<div class="title" ng-click="toggle()">{{title}}</div>'
12                  + '<div class="body" ng-transclude ng-show="showMe"></div>'
13                  + '</div>',
14         link : function(scope,element,attrs){
15             scope.showMe=false;
16             scope.toggle=function(){
17                 scope.showMe=!scope.showMe
18             }
19         }
20     }
21 })
22 
23 app.controller("tempCtrl",function($scope){
24     $scope.title="点我，你能看到更多"
25     $scope.text="是不是多了几个字"
26 })

html：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <script type="text/javascript" src="angular.js" ></script>
 6         <script type="text/javascript" src="temp.js"></script>
 7         <title></title>
 8     </head>
 9     <body ng-app="app">
10         <div ng-controller="tempCtrl">
11             <temp class="expander" temp-title="title">{{text}}</temp>
12         </div>        
13     </body>
14 </html>

 

posted on 2017-06-12 16:13  逍遥云天  阅读(762)  评论(0)  编辑  收藏  举报

导航