AngularJS自定义指令

AngularJS 通过被称为 指令 的新属性来扩展 HTML。

AngularJS 通过内置的指令来为应用添加功能。

AngularJS 允许你自定义指令。

AngularJS指令参考手册

  <div ng-app="myApp" ng-init="">
        <h4>自定义指令</h4>
        <mydiect></mydiect>
  </div>
    <script>
        var app=angular.module("myApp",[]);
        app.directive("mydiect",function(){
            return{
                template:"<h1>这是一个自定义指令!!!</h1>"
            }
        })
    </script>

可以通过以下方式来调用指令：

• 元素名
• 属性
• 类名
• 注释

    <div ng-app="myApp">
        <!-- mydiect -->
        <!-- 元素名 -->
        <mydiect></mydiect>
        <!-- 属性 -->
        <div mydiect></div>
        <!-- 类名 -->
        <div class="mydiect"></div>
        <!-- 注释 -->
        <!-- directive:mydiedct -->
    </div>
    <script>
        var app = angular.module("myApp", []);
        app.directive("mydiect", function () {
            return {
                // restrict: "A",
                // restrict:"C",
                restrict:"E",
                template: "<h1>这是一个自定义指令!!!</h1>"
            }
        })
    </script>

 

restrict 值可以是以下几种:

E 作为元素名使用

A 作为属性使用

C 作为类名使用

M 作为注释使用

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