码迷,mamicode.com
首页 > Web开发 > 详细

Angularjs directive

时间:2014-07-03 13:13:29      阅读:246      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   html   cti   

 1 app.directive(‘helloWorld‘, function() {
 2     return {
 3         restrict: ‘AE‘,
 4         replace: ‘true‘,
 5         scope: {},
 6         template: ‘<h3>Hello World!!</h3>‘,
 7         templateUrl: ‘‘,
 8         compile: function(tElem, attrs) {
 9             //do optional DOM transformation here  
10             return function(scope, elem, attrs) {
11                 //linking function here  
12             }
13         },
14         link: function(scope, elem, attrs) {
15             //write your functions            
16         },
17         require: ‘^otherDirective‘,
18         controller: function($scope, $compile, $http) {
19             // $scope is the appropriate scope for the directive
20             this.addChild = function(nestedDirective) { // this refers to the controller
21                 console.log(‘Got the message from nested directive:‘ + nestedDirective.message);
22             };
23         }
24     }
25 });

restrict

设置指令在HTML如何作用

参数列表:

A - attribute

C - class

E - element

M - comment

replace

设置加载template/templateUrl时, 对directive自身这个标签的处理

参数列表:

false: 默认值, 保留这个标签的html代码

true: 用template/templateUrl的内容替换个这个directive标签

如:

1 <div hello-directive></div>
2 {
3   replace: true,
4   template: ‘<div>hi</div>‘
5 }

页面结果为:

1 <div>hi</div>

反之(replace=false):

1 <div hello-directive>
2     <div>hi</div>
3 </div>

Angularjs directive,布布扣,bubuko.com

Angularjs directive

标签:style   blog   http   color   html   cti   

原文地址:http://www.cnblogs.com/awakening/p/3821329.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!