AngularJS中directive指令使用之事件绑定与指令交互用法示例  更新时间:2016年11月22日 11:42:22   作者:栁罗风尘   这篇文章主要介绍了AngularJS中directive指令使用之事件绑定与指令交互用法,结合实例形式分析了directive指令在模板的使用,事件的绑定及元素、属性、控制器之间的交互相关操作技巧,需要的朋友可以参考下 本文实例讲述了AngularJS中directive指令使用之事件绑定与指令交互用法。分享给大家供大家参考,具体如下: AngularJS中模板的使用,事件绑定以及指令与指令之间的交互 343 fdhg hhh kkk 希望本文所述对大家AngularJS程序设计有所帮助。 您可能感兴趣的文章: Angularjs为ng-click事件传递参数 angular ng-click防止重复提交实例 AngularJS基础 ng-click 指令示例代码 AngularJS的ng-click传参的方法 详解angularJS动态生成的页面中ng-click无效解决办法 Angularjs 动态添加指令并绑定事件的方法 Angularjs中使用指令绑定点击事件的方法 AngularJs ng-change事件/指令的用法小结 Angularjs 事件指令详细整理 Angular使用操作事件指令ng-click传多个参数示例 AngularJS directive指令 相关文章 解决Angular.Js与Django标签冲突的方案 AngularJS和django的模板都是用{{}}来引用变量的,这就导致了冲突,所以这篇文章主要就给大家介绍了如何解决Angular.Js与Django标签冲突的方案,有需要的朋友们可以参考借鉴,下面来一起学习学习吧。 2016-12-12 详细分析使用AngularJS编程中提交表单的方式 这篇文章主要介绍了详细分析使用AngularJS提交表单的方式,AngularJS是非常热门的JavaScript库,文中展示了AngularJS在前端与后端的PHP进行交互的场景,需要的朋友可以参考下 2015-06-06 Angular浏览器插件Batarang介绍及使用 本篇文章主要介绍了Angular浏览器插件Batarang介绍及使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-02-02 Angular使用$http.jsonp发送跨站请求的方法 这篇文章主要介绍了Angular使用$http.jsonp发送跨站请求的方法,结合实例形式分析了$http.jsonp发送跨站请求遇到的问题与相应的解决方法,具有一定参考借鉴价值,需要的朋友可以参考下 2017-03-03 AngularJs bootstrap搭载前台框架——准备工作 本文主要介绍AngularJs bootstrap搭载前台框架,这里对Bootstrap 搭载环境,及注意事项做了讲解,有需要的小伙伴可以参考下 2016-09-09 将angular.js项目整合到.net mvc中的方法详解 这篇文章主要给大家介绍了将angular.js项目整合到.net mvc中的相关资料,文中通过示例代码将实现的过程介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编来一起看看吧。 2017-06-06 angularjs实现过滤并替换关键字小功能 这篇文章主要为大家详细介绍了angularjs实现过滤并替换关键字小功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-09-09 Angular 5.x 学习笔记之Router(路由)应用 本篇文章主要介绍了Angular 5.x 学习笔记之Router(路由)应用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-04-04 Angular ElementRef简介及其使用 这篇文章主要介绍了Angular ElementRef简介及其使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-10-10 angular.js 路由及页面传参示例 本篇文章主要介绍了angular.js 路由及页面传参示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-02-02 最新评论

本文实例讲述了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为ng-click事件传递参数
  • angular ng-click防止重复提交实例
  • AngularJS基础 ng-click 指令示例代码
  • AngularJS的ng-click传参的方法
  • 详解angularJS动态生成的页面中ng-click无效解决办法
  • Angularjs 动态添加指令并绑定事件的方法
  • Angularjs中使用指令绑定点击事件的方法
  • AngularJs ng-change事件/指令的用法小结
  • Angularjs 事件指令详细整理
  • Angular使用操作事件指令ng-click传多个参数示例
张贴在3