AngularJS のディレクティブディレクティブを使用したイベントバインディングと命令インタラクションの使用例-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

AngularJS のディレクティブディレクティブを使用したイベントバインディングと命令インタラクションの使用例

Dec 24, 2016 am 09:52 AM

この記事の例では、AngularJS でのディレクティブ命令のイベントバインディングと命令相互作用の使用法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

AngularJS でのテンプレートの使用、イベントバインディング、および命令間の相互作用

&lt;!doctype html&gt;
&lt;html ng-app=&quot;myapp&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;/&gt;
  &lt;/head&gt;
  &lt;body ng-controller=&quot;ShieldController&quot;&gt;
    &lt;div&gt;
      &lt;who&gt;&lt;/who&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;button you-btn&gt;&lt;/button&gt;
    &lt;/div&gt;
    &lt;theshield reigns&gt;343&lt;/theshield&gt;
    &lt;theshield reigns&gt;fdhg&lt;/theshield&gt;
    &lt;theshield rollins&gt;hhh&lt;/theshield&gt;
    &lt;theshield ambros&gt;kkk&lt;/theshield&gt;
  &lt;/body&gt;
  &lt;script src=&quot;./js/angular.min.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
    var app = angular.module(&#39;myapp&#39;,[]);
    /*=======================1. 模板的使用 ========================*/
    app.directive(&#39;who&#39;,function(){
      return {
        restrict:&quot;E&quot;,       //元素element 的意思
        link:function(scope,element,attrs){
          console.log(element);
          element[0].innerHTML = &#39;sdfhkj&#39;; //这个优先级别最高
        },
        //templateUrl:&quot;param.html&quot;, //这个不显示 优先级别最低
        template:&quot;&lt;h1&gt;jkdhf&lt;/h1&gt;&quot; //这个显示 优先级别其次
      };
    });
    /*=======================2. 事件的绑定 ========================*/
    app.directive(&#39;youBtn&#39;,function(){
      return {
        restrict:&quot;A&quot;, //attribute 属性的意思
        link:function(scope,element,attrs){
          console.log(element);
          element[0].innerHTML = &#39;my btn&#39;;
          //事件绑定
          element.bind(&#39;mouseenter&#39;,function(){
            element[0].innerHTML = &#39;your btn&#39;;
          });
          element.bind(&#39;mouseleave&#39;,function(){
            element[0].innerHTML = &#39;her btn&#39;;
          });
        }
      };
    });
    /*=======================3. 元素 属性 控制器之间的交互========================*/
    app.controller(&#39;ShieldController&#39;,function($scope){
      $scope.shieldNames = [];
      this.addReigns = function(){
        $scope.shieldNames.push(&quot;reigns:jjj&quot;);
      }
      this.addRollins = function(){
        $scope.shieldNames.push(&quot;Rollins:hhh&quot;);
      }
      this.addAmbros = function(){
        $scope.shieldNames.push(&quot;Ambros:ggg&quot;);
      }
    })
    .directive(&#39;reigns&#39;,function(){
     return {
       require:&quot;theshield&quot;,
       link:function(scope,element,attrs,ShieldController){
         ShieldController.addReigns();
       }
     };
    })
    .directive(&#39;rollins&#39;,function(){
     return {
       require:&quot;theshield&quot;,
       link:function(scope,element,attrs,ShieldController){
         ShieldController.addRollins();
       }
     };
    })
    .directive(&#39;ambros&#39;,function(){
     return {
       require:&quot;theshield&quot;,
       link:function(scope,element,attrs,ShieldController){
         ShieldController.addAmbros();
       }
     };
    })
    .directive(&#39;theshield&#39;,function(){
      return {
        restrict:&quot;E&quot;,
        controller:&quot;ShieldController&quot;, //指定控制器
        scope:{},           //清空该指令处的$scope 值
        link:function(scope,element,attrs){
          element.bind(&#39;mouseenter&#39;,function(){ //对于该指令所对应的元素绑定对应的事件
            console.log(scope.shieldNames);
          });
        }
      };
    });
  &lt;/script&gt;
&lt;/html&gt;

ログイン後にコピー

この記事が AngularJS プログラミングの皆様に役立つことを願っています。

AngularJS のディレクティブ命令のイベントバインディングと命令相互作用の使用例に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。