Angularjs directive

浏览数：22 / 时间：2015年06月09日 
 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,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class 代码 style html sp Go class 代码 style html sp Go

相关文章

随机文章

您可能还喜欢

您可能还喜欢