欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

AngularJS中directive指令使用之事件绑定与指令交互用法示例

程序员文章站 2023-11-16 14:00:04
本文实例讲述了angularjs中directive指令使用之事件绑定与指令交互用法。分享给大家供大家参考,具体如下: angularjs中模板的使用,事件绑定以及指令与...

本文实例讲述了angularjs中directive指令使用之事件绑定与指令交互用法。分享给大家供大家参考,具体如下:

angularjs中模板的使用,事件绑定以及指令与指令之间的交互

<!doctype html>
<html ng-app="myapp">
  <head>
    <meta charset="utf-8"/>
  </head>
  <body ng-controller="shieldcontroller">
    <div>
      <who></who>
    </div>
    <div>
      <button you-btn></button>
    </div>
    <theshield reigns>343</theshield>
    <theshield reigns>fdhg</theshield>
    <theshield rollins>hhh</theshield>
    <theshield ambros>kkk</theshield>
  </body>
  <script src="./js/angular.min.js"></script>
  <script>
    var app = angular.module('myapp',[]);
    /*=======================1. 模板的使用 ========================*/
    app.directive('who',function(){
      return {
        restrict:"e",       //元素element 的意思
        link:function(scope,element,attrs){
          console.log(element);
          element[0].innerhtml = 'sdfhkj'; //这个优先级别最高
        },
        //templateurl:"param.html", //这个不显示 优先级别最低
        template:"<h1>jkdhf</h1>" //这个显示 优先级别其次
      };
    });
    /*=======================2. 事件的绑定 ========================*/
    app.directive('youbtn',function(){
      return {
        restrict:"a", //attribute 属性的意思
        link:function(scope,element,attrs){
          console.log(element);
          element[0].innerhtml = 'my btn';
          //事件绑定
          element.bind('mouseenter',function(){
            element[0].innerhtml = 'your btn';
          });
          element.bind('mouseleave',function(){
            element[0].innerhtml = 'her btn';
          });
        }
      };
    });
    /*=======================3. 元素 属性 控制器之间的交互========================*/
    app.controller('shieldcontroller',function($scope){
      $scope.shieldnames = [];
      this.addreigns = function(){
        $scope.shieldnames.push("reigns:jjj");
      }
      this.addrollins = function(){
        $scope.shieldnames.push("rollins:hhh");
      }
      this.addambros = function(){
        $scope.shieldnames.push("ambros:ggg");
      }
    })
    .directive('reigns',function(){
     return {
       require:"theshield",
       link:function(scope,element,attrs,shieldcontroller){
         shieldcontroller.addreigns();
       }
     };
    })
    .directive('rollins',function(){
     return {
       require:"theshield",
       link:function(scope,element,attrs,shieldcontroller){
         shieldcontroller.addrollins();
       }
     };
    })
    .directive('ambros',function(){
     return {
       require:"theshield",
       link:function(scope,element,attrs,shieldcontroller){
         shieldcontroller.addambros();
       }
     };
    })
    .directive('theshield',function(){
      return {
        restrict:"e",
        controller:"shieldcontroller", //指定控制器
        scope:{},           //清空该指令处的$scope 值
        link:function(scope,element,attrs){
          element.bind('mouseenter',function(){ //对于该指令所对应的元素绑定对应的事件
            console.log(scope.shieldnames);
          });
        }
      };
    });
  </script>
</html>

希望本文所述对大家angularjs程序设计有所帮助。