angularJS自定义directive之带参方法传递详解

如下所示：

//自定义指令 "myEmail"

grgApp.directive("myEmail",function(){
return{
restrict:'AE',
scope:{toDir:'@',
fromName:'@',
sendEmail:'&'
},
templateUrl:'/htmls/main/html/custom/email.html',}
});

//控制器中的方法

$scope.send=function(msg){
alert("send email! msg: "+msg);
 }

//email.html

<div style="width: 100%;height: 100%;color: white;font-size: 0.8rem;">
<label style="width: 100%;height: 15%;" ng-bind="toDir"></label>
<label style="width: 100%;height: 15%;" ng-bind="fromName"></label>
<textarea style="width: 100%;height: 25%;color: black;" ng-model="content"></textarea>
<button style="width: 10%;height: 15%;color: black;" ng-click="sendEmail({msg:content})">提交</button>
</div>

//html调用

<my-email to-dir="广东中山" from-name="海南海口" send-email="send(msg)"/>

功能：点击【提交】后，将自定义指令myEmail中textarea元素的内容传递给控制器中的send()方法。

关键点：模板email.html中的ng-click="sendEmail({msg:content})" 参数{msg:content}必须是一个键值对，键为：方法参数名 值为：传递的内容

以上这篇angularJS自定义directive之带参方法传递详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解angularJs中自定义directive的数据交互

    详解angularJs中自定义directive的数据交互

    就我对directive的粗浅理解,它一般用于独立Dom元素的封装,应用场合为控件重用和逻辑模块分离.后者我暂时没接触,但数据交互部分却是一样的.所以举几个前者的例子,以备以后忘记. directive本身的作用域$scope可以选择是否封闭,不封闭则和其controller共用一个作用域$scope.例子如下: <body ng-app="myApp" ng-controller="myCtrl"> <test-directive><

  • AngularJS自定义控件实例详解

    本文实例讲述了AngularJS自定义控件.分享给大家供大家参考,具体如下: 自定义指令介绍 AngularJS 指令作用是在 AngulaJS 应用中操作 Html 渲染.比如说,内插指令 ( {{ }} ), ng-repeat 指令以及 ng-if 指令. 当然你也可以实现自己的.这就是 AngularJS 所谓的"教会 HTML 玩新姿势".本文将告诉你如何做到. 指令类型 可以自定义的指令类型如下: 元素 属性 CSS class Comment directives 这里面

  • Angularjs使用directive自定义指令实现attribute继承的方法详解

    Angularjs使用directive自定义指令实现attribute继承的方法详解

    本文实例讲述了Angularjs使用directive自定义指令实现attribute继承的方法.分享给大家供大家参考,具体如下: 一.Html代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&

  • 详解Angular 自定义结构指令

    1. <ng-template>元素 import { Component, TemplateRef, ViewContainerRef, ViewChild, AfterViewInit } from '@angular/core'; @Component({ selector: 'app-code404', template: ` <!-- 这里使用一个模板变量,在组件中使用@ViewChild装饰器获取模板元素--> <ng-template #tpl> Big

  • AngularJS创建自定义指令的方法详解

    本文实例讲述了AngularJS创建自定义指令的方法.分享给大家供大家参考,具体如下: 这是一篇译文,来自angular开发者说明的指令.主要面向已经熟悉angular开发基础的开发者.这篇文档解释了什么情况下需要创建自己的指令,和如何去创建指令. 什么是指令 从一个高的层面来讲,指令是angular $compile服务的说明,当特定的标签(属性,元素名,或者注释) 出现在DOM中的时候,它让编译器附加指定的行为到DOM上. 这个过程是很简单的.angular内部有很用这样自带的指令,比如说n

  • angularJS自定义directive之带参方法传递详解

    如下所示: //自定义指令 "myEmail" grgApp.directive("myEmail",function(){ return{ restrict:'AE', scope:{toDir:'@', fromName:'@', sendEmail:'&' }, templateUrl:'/htmls/main/html/custom/email.html',} }); //控制器中的方法 $scope.send=function(msg){ aler

  • Android自定义View的实现方法实例详解

    Android自定义View的实现方法实例详解

    一.自绘控件 下面我们准备来自定义一个计数器View,这个View可以响应用户的点击事件,并自动记录一共点击了多少次.新建一个CounterView继承自View,代码如下所示: 可以看到,首先我们在CounterView的构造函数中初始化了一些数据,并给这个View的本身注册了点击事件,这样当CounterView被点击的时候,onClick()方法就会得到调用.而onClick()方法中的逻辑就更加简单了,只是对mCount这个计数器加1,然后调用invalidate()方法.通过 Andr

  • Angular7中创建组件/自定义指令/管道的方法实例详解

    组件 使用命令创建组件 •创建组件的命令:ng generate component 组件名 •生成的组件组成: 组件名.html .组件名.ts.组件名.less.组件名.spec.ts •在组件的控制器 @Component({ selector: 'app-heroes', templateUrl: './heroes.component.html', styleUrls: ['./heroes.component.less'] }) 手动创建组件 1.创建一个组件ts文件 2.在组件中设

  • AngularJS 中ui-view传参的实例详解

    Angular路由传参 首页 <!DOCTYPE html> <html ng-app="app"> <head> <title>路由传参</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" c

  • IOS自带Email的两种方法实例详解

    IOS自带Email的两种方法实例详解 IOS系统框架提供的两种发送Email的方法:openURL 和 MFMailComposeViewController.借助这两个方法,我们可以轻松的在应用里加入如用户反馈这类需要发送邮件的功能. 1.openURL 使用openURL调用系统邮箱客户端是我们在IOS3.0以下实现发邮件功能的主要手段.我们可以通过设置url里的相关参数来指定邮件的内容,不过其缺点很明显,这样的过程会导致程序暂时退出.下面是使用openURL来发邮件的一个小例子: #pr

  • Element-ui tree组件自定义节点使用方法代码详解

    工作上使用到element-ui tree 组件,主要功能是要实现节点拖拽和置顶,通过自定义内容方法(render-content)渲染树代码如下~ <template> <div class="sortDiv"> <el-tree :data="sortData" draggable node-key="id" ref="sortTree" default-expand-all :expand-

  • apache zookeeper使用方法实例详解

    本文涉及了Apache Zookeeper使用方法实例详解的相关知识,接下来我们就看看具体内容. 简介 Apache Zookeeper 是由 Apache Hadoop 的 Zookeeper 子项目发展而来,现在已经成为了 Apache 的顶级项目.Zookeeper 为分布式系统提供了高效可靠且易于使用的协同服务,它可以为分布式应用提供相当多的服务,诸如统一命名服务,配置管理,状态同步和组服务等. Zookeeper 接口简单,开发人员不必过多地纠结在分布式系统编程难于处理的同步和一致性问

  • Java基础之方法重写详解

    一.java方法重写 方法的重写是子类根据需求对父类继承的方法进行重新的编写,在重写时,可以使用super方法的方式来保留父类中的方法,注意:构造方法不可以被重写. 创建一个人类,属性包括姓名 性别 年龄 行为方法是输出信息 二.super关键字 方法重写时要在子类中定义一个和父类相同名称的方法,并采用super关键字super.方法名();,这样就实现了方法的重写 package cn.zhz.Kind.dh; public class Person1 { public String sex;

  • MyBatis-Plus实现分页的方法使用详解

    MyBatis-Plus实现分页的方法使用详解

    目录 简介 建库建表 依赖 配置 代码 Entity Mapper Service Controller 测试 简介 本文介绍MyBatis-Plus的分页的方法. 包括: 不传参数时的默认结果 查询不存在的数据 手动包装page 自定义SQL 建库建表 DROP DATABASE IF EXISTS mp; CREATE DATABASE mp DEFAULT CHARACTER SET utf8; USE mp; DROP TABLE IF EXISTS `t_user`; SET NAME

  • JSP开发Servlet重写init（）方法实例详解

    JSP开发Servlet重写init()方法实例详解 写一个Servlet时,有时需要我们重写该Servlet的初始化方法,然后,究竟是重写init(ServletConfig config),还是重写init(),这是个问题.要明了这一点,首先要知道Servlet的几个类和接口的联系: ServletConfig接口:其中有getServletName();getServletContext();getInitParameter(String name);getInitParameterNam

随机推荐