首页 > 代码库 > Angularjs directive

Angularjs directive

2024-07-10 16:03:18   231人阅读

 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 directive20             this.addChild = function(nestedDirective) { // this refers to the controller21                 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>


联系
我们