angularjs自定义指令

来源：互联网发布：武汉软件公司知乎编辑：程序博客网时间：2024/06/05 21:15

replace：是否用模板替换当前元素。

为true时 : 将指令标签替换成temple中定义的内容,页面上不会再有<my-directive>标签；

为false时：则append（追加）在当前元素上，即模板的内容包在<my-directive>标签内部。默认false。

var app = angular.module("app", [])
.directive("hello", function () {
var option = {
restrict: "AECM",
template: "<h3>Hello, Directive</h3>",
replace: true //这里replace为true，所以原来的内容会被template代替
};
return option;
})

<html>
<head></head>
<body>
<hello>我是原来的内容</hello> //////// 变成<h3>Hello, Directive</h3>
　　　　　　 ////////如果replace为false ,则变为：<hello><h3>Hello, Directive</h3></hello>
</body>
</html>

2：transculde：是否使用ng-transculde来包含html中指令包含的原有的内容，接收两个参数true/false

var app = angular.module("app", [])
.directive("hello", function () {
var option = {
restrict: "AECM",
template: "<h3>Hello, Directive</h3><span ng-transclude></span>",
transculde: true //这里transculde为true，所以原来的内容会被放在有ng-transclude属性的标签内
};
return option;
})

<html>
<head></head>
<body>
<hello>我是原来的内容</hello> //////////// 变成<hello><h3>Hello, Directive</h3><span ng-transclude>我是原来的内容</span></hello>
</body>
</html>

0 0