自定义指令

最新推荐文章于 2024-06-16 22:02:56 发布

lj2tj

最新推荐文章于 2024-06-16 22:02:56 发布

阅读量259

点赞数

分类专栏： AngularJS

本文链接：https://blog.csdn.net/lj2tj/article/details/53065438

版权

AngularJS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

重新开始学习AngularJS，把学到的一些东西记录下来。

今天学习AngularJS的自定义属性，按照runoob上面的例子联系一下，原文地址：http://www.runoob.com/angularjs/angularjs-directives.html

1. 使用元素名作为自定义属性：

<body ng-app="myApp">

<runoob-directive></runoob-directive>

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>

2. 使用元素属性作为自定义属性：

<body ng-app="myApp">
<div runoob-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
restrict:"A",
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

限制自定义指令的使用方式：

var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});

restrict 值可以是以下几种:

E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用

restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

lj2tj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义指令

重新开始学习AngularJS，把学到的一些东西记录下来。今天学习AngularJS的自定义属性，按照runoob上面的例子联系一下，原文地址：http://www.runoob.com/angularjs/angularjs-directives.html1. 使用元素名作为自定义属性：var app = angular.module("myApp", []);app.d
复制链接

扫一扫

专栏目录