suchen

Heim >Web-Frontend >js-Tutorial >Beispielanalyse der vier Grundformen von Direktiven in AngularJS

Beispielanalyse der vier Grundformen von Direktiven in AngularJS

高洛峰
高洛峰Original
2016-12-05 16:49:261077Durchsuche

Die Beispiele in diesem Artikel beschreiben die vier Grundformen von Direktiven in AngularJS. Teilen Sie es allen als Referenz mit. Die Details lauten wie folgt: Unter den vier Grundformen der

-Direktive

ist die Verwendungsmethode der Annotation-Direktive M die 4da4de23780a7260706461bf67f47bb0 Beachten Sie, dass auf der linken und rechten Seite Leerzeichen vorhanden sein müssen.

Alle Befehle können miteinander kombiniert werden Ein Attributbefehl. Um IE8 zu unterstützen, ist es für Browser im Allgemeinen am besten, den Befehl auf Attribute zu setzen. 

<!doctype html>
<html ng-app="myapp">
  <head>
    <meta charset="utf-8"/>
  </head>
  <body>
    <elementtag>E</elementtag>
    <div attr>A</div>
    <div class="classnamw">C</div>
    <!-- 注意注释变量两侧必须加上空格 否则不会正确执行这个指令 -->
    <!-- directive:commit -->
    <div></div>
  <script src="./js/angular.min.js"></script>
  <script>
    var app = angular.module(&#39;myapp&#39;,[]);
    app.directive(&#39;elementtag&#39;,function(){
      return {
        restrict:"E", //元素指令
        link:function(scope,element,attrs){
          console.log("this is a element");
        }
      };
    })
    .directive(&#39;attr&#39;,function(){
      return {
        restrict:"A", //属性指令
        link:function(scope,element,attrs){
          console.log("this is a attribute");
        }
      };
    })
    .directive(&#39;classnamw&#39;,function(){
      return {
        restrict:"C", //class 指令
        link:function(scope,element,attrs){
          console.log("this is a class");
        }
      };
    })
    .directive(&#39;commit&#39;,function(){
      return {
        restrict:"M", //注释指令
        link:function(scope,element,attrs){
          console.log("this is a commit");
        }
      };
    });
  </script>
</html>

Ich hoffe, dass dieser Artikel für alle in der AngularJS-Programmierung hilfreich ist.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Implementieren Sie den Kontrollkästchen-Batch-Auswahlvorgang basierend auf jsNächster Artikel：Implementieren Sie den Kontrollkästchen-Batch-Auswahlvorgang basierend auf js

In Verbindung stehende Artikel

Mehr sehen