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

更新时间：2016年11月22日 11:42:22 作者：栁罗风尘

这篇文章主要介绍了AngularJS中directive指令使用之事件绑定与指令交互用法,结合实例形式分析了directive指令在模板的使用，事件的绑定及元素、属性、控制器之间的交互相关操作技巧,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

实践中学习AngularJS表单
表单是最常用的一种组建。在Angular.js中，其实并没有单独的为表单添加多少特殊功能。但是，利用Angular.js框架本身的特点，可以更友好的呈现表单。下面将介绍几种常用的功能在Angular中是如何巧妙实现的
2016-03-03
Angular.Js之Scope作用域的学习教程
这篇文章主要给大家分享了关于Angular.Js之Scope作用域的学习教程 ,文中通过多个示例代码介绍的非常详细，相信对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-04-04
AngularJS动态生成select下拉框的方法实例
这篇文章主要给大家介绍了关于AngularJS动态生成select下拉框的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用AngularJS具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-11-11
详解Angular的双向数据绑定(MV-VM)
本文主要对Angular的双向数据绑定(MV-VM)进行实例分析，具有一定的参考价值，下面跟着小编一起来看下吧
2016-12-12
AngularJS动态生成div的ID源码解析
这篇文章主要介绍了基于AngularJS动态生成div的ID,本文介绍的非常详细，具有参考借鉴价值，对angularjs动态生成div的id相关知识感兴趣的朋友一起学习吧
2016-08-08
理解AngularJs篇：30分钟快速掌握AngularJs
这篇文章主要介绍了理解AngularJs篇：30分钟快速掌握AngularJs，详细介绍了AngularJs所涉及的知识点，有兴趣的可以了解一下。
2016-12-12
Angular4学习教程之HTML属性绑定的方法
这篇文章主要给大家介绍了关于Angular4学习教程之HTML属性绑定的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2018-01-01
angular.js+node.js实现下载图片处理详解
这篇文章主要介绍了angular.js+node.js实现下载图片处理的相关资料，文中介绍的非常详细，对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
2017-03-03
AngularJS2中一种button切换效果的实现方法（二）
这篇文章主要介绍了AngularJS2中一种button切换效果的实现方法（二）,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-03-03
动手写一个angular版本的Message组件的方法
本篇文章主要介绍了动手写一个angular版本的Message组件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12