您的位置：首页 > Web前端 > AngularJS

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

2017-06-12 16:13 621 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航