angularjs中directive的restrict 使用说明

最新推荐文章于 2023-06-29 07:00:00 发布

smart_iceboy

最新推荐文章于 2023-06-29 07:00:00 发布

阅读量1.5k

点赞数

文章标签： angularjs

本文链接：https://blog.csdn.net/Smart_IceBoy/article/details/51142573

版权

详解Directive（指令）机制

E 表示该指令是一个element;

<html ng-app='app'>
    <body>
        <hello></hello>
    </body>

    <script src="../angular-1.0.3/angular.min.js"></script>
    <script>
         var appModule = angular.module('app', []);
         appModule.directive('hello', function() {
             return {
        	restrict: 'E',
                template: '<div>Hi there</div>',
                replace: true
             };
          });
    </script>
</html>

A 表示该指令是attribute;

<html ng-app='app'>
    <body>
        <div style="width:100px;height:100px;"  hello-world></div>
    </body>

    <script src="../angular-1.0.3/angular.min.js"></script>
    <script>
         var appModule = angular.module('app', []);
         appModule.directive('helloWorld', function() {
             return {
        	restrict: 'A',
                template: '<div>Hi there</div>',
                replace: true
             };
          });
    </script>
</html>

C 表示该指令是class;

<html ng-app='app'>
    <body>
        <div class="hello"></div>
    </body>

    <script src="../angular-1.0.3/angular.min.js"></script>
    <script>
         var appModule = angular.module('app', []);
         appModule.directive('hello', function() {
             return {
        	restrict: 'C',
                template: '<div>Hi there</div>',
                replace: true
             };
          });
    </script>
</html>

M 表示该指令是注视（没用过，待补充）

smart_iceboy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs中directive的restrict 使用说明

详解Directive（指令）机制E 表示该指令是一个element; var appModule = angular.module('app', []); appModule.directive('hello', function() { return {
复制链接

扫一扫