详解angularJS自定义指令间的相互交互

 更新时间:2017年07月05日 16:53:37   作者:outsiderlcy  
本篇文章主要介绍了详解angularJS自定义指令间的相互交互,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

AngularJS 自定义指令

transclude:当元素标签需要嵌套时使用,与ng-transclude配合使用。默认值为false不能使用嵌套,true为可以使用嵌套。在哪个标签上使用ng-transclude就在哪个标签内进行嵌套。

代码示例:(将hello、hi标签进行替换同时span标签嵌套div内)

<script type="text/javascript">
  var m = angular.module('myApp',[]);
  m.directive('hello',function(){
    return{
      restrict:'E',
      replace:true,
      transclude:true,
      template:'<div>hello angular<h1 ng-transclude></h1></div>'
    };
  });
  m.directive('hi',function(){
    return{
      restrict:'E',
      replace:true,
      template:'<span>hi angular</span>'
    };
  });
  m.controller('Aaa',['$scope',function($scope){
    $scope.name='hello';
  }]);
  </script>

<body ng-controller="Aaa">
  <hello>
    <hi></hi>
  </hello>
</body>

页面结果展示:

这里写图片描述

在自定义指令当中controller与link的区别:

link是指DOM操作,操作也是针对当前标签

controller是多调用性的数据共享,指令与指令间进行交互时也可以设置一些方法数据,在其他标签中也可以调用

require:从外部引入数据,参数为被引入的指令,被引入的指令需要在引入指令的身上。

》^:是指被引入的指令是引入指令的父级

》?:兼容错误

代码示例:

  <script type="text/javascript">
  var m = angular.module('myApp',[]);
  m.directive('hello',function(){
    return{
      restrict:'E',
      replace:true,
      transclude:true,
      controller:function($scope){
        //$scope.name='miaov';只能在该标签中使用
        this.name = 'miaov';//可以在其他标签中调用
      },
      template:'<div>hello angular<h1 ng-transclude></h1></div>'
    };
  });
  m.directive('hi',function(){
    return{
      restrict:'E',
      replace:true,
      require:'?^hello',//从外部引入指令,参数为被引入的标签
      link:function($scope,element,attr,reController){
        console.log(reController.name);
      },
      template:'<span>hi angular</span>'
    };
  });
  m.controller('Aaa',['$scope',function($scope){
    $scope.name='hello';
  }]);
  </script>

<body ng-controller="Aaa">
  <hello>
    <hi></hi>
  </hello>
</body>

页面结果展示:

这里写图片描述

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Angular2实现的秒表及改良版示例

    Angular2实现的秒表及改良版示例

    这篇文章主要介绍了Angular2实现的秒表及改良版,结合实例形式分析 Angular2实现秒表功能的原理、操作技巧与相关注意事项,需要的朋友可以参考下
    2019-05-05
  • AngularJS 使用 UI Router 实现表单向导

    AngularJS 使用 UI Router 实现表单向导

    这篇文章主要介绍了AngularJS 使用 UI Router 实现表单向导 的相关资料,需要的朋友可以参考下
    2016-01-01
  • angular.fromJson与toJson方法用法示例

    angular.fromJson与toJson方法用法示例

    这篇文章主要介绍了angular.fromJson与toJson方法用法,结合实例形式分析了AngularJS使用fromJson与toJson方法进行json格式数据的解析与转换相关操作技巧,需要的朋友可以参考下
    2017-05-05
  • 详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖

    详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖

    本篇文章主要介绍了详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-03-03
  • 详解AngularJs ui-router 路由的简单介绍

    详解AngularJs ui-router 路由的简单介绍

    本篇文章主要介绍了AngularJs ui-router 路由的简单介绍。简单明了的说明了ngRoute和ui-router的区别和用法,有兴趣的可以了解一下
    2017-04-04
  • Angular Material Icon使用详解

    Angular Material Icon使用详解

    这篇文章主要介绍了Angular Material Icon使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • Angular重构数组字段的解决方法示例

    Angular重构数组字段的解决方法示例

    这篇文章主要为大家介绍了Angular重构数组字段的解决方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • AngularJS实现网站换肤实例

    AngularJS实现网站换肤实例

    这篇文章主要为大家详细介绍了AngularJS实现网站换肤的简单实例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • Angular应用tsconfig.json中的lib属性示例解析

    Angular应用tsconfig.json中的lib属性示例解析

    这篇文章主要介绍了Angular应用tsconfig.json中的lib属性示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • AngularJS入门教程一:路由用法初探

    AngularJS入门教程一:路由用法初探

    这篇文章主要介绍了AngularJS路由用法,简单分析了AngularJS路由的概念、功能及基本使用方法,需要的朋友可以参考下
    2017-05-05

最新评论