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 중국어 웹사이트에 주목하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.