html directive 内容传递,directive的传值问题（全面解析directive的传值问题）微信分享实例...

(一)开发人员可以使用directive自定义angularjs的指令，定义指令的类型有"A"、"E"、"C"、"EAC"，这个过程比较简单，就不加说明了，当你定义好指令之后，问题来了，你怎么把html页面的参数传入到directive自定义的指令中？下面是我做的方法，相信一定能解决你的困扰。

首先我通过directive创建了如下指令：(在这里注意命名采用驼峰命名法).directive('homeShare', function ($ionicGesture, $ionicFtActionSheet,$rootScope,drugService) {

return {

restrict: 'A',

link: function ($scope, $element) {

var tapFn = function (evt) {

evt.stopPropagation();

$ionicFtActionSheet.show({

buttons: [

{

img: "img/g_qq_13.png",

text: "QQ"

{

img: "img/g_qq_14.png",

text: "朋友圈"

{

img: "img/g_qq_15.png",

text: "微信"

}

destructiveText: '取消',

destructiveButtonClicked: function () {

console.log('取消分享');

return true;

buttonClicked: function (index) {

if (index == 0) {

$scope.qqShare();

} else if (index == 1) {

$scope.weiboShare();

} else if (index == 2) {

$scope.weixinShare();

}

return true;

}

});

};

$ionicGesture.on("tap", tapFn, $element);

}

})(二)上面是定义的微信分享的指令，我们在前端页面引用它，代码如下：

注意：这里使用指令的时候使用"-"把每个单词分隔开，angular还提供了其他的两种写法，这种是最好的，想了解了可以自己google，上面的引用代码我自己写了一个info属性，后面填入的是html页面拿到的数据对象，在这里把参数当作属性，在directive里面可以获取到，详细写法请往后看。

(三)directive中获取html页面传来的info参数，代码如下：

在directive使用scope来存储参数，方便后面的使用(注意：这里有个坑，当使用了scope的时候，我们在当前控制器定义的函数全部不能调用，需要自己在directive写)，打印我们拿到的参数如下：

打印结果如下：

上面我们拿到了想要的html页面的所有数据，接下来怎么使用数据，就看你们的业务逻辑了。比如想要使用id的值，可以这样获取：

就可以拿到参数的id，如下：

完美拿到数据，由于每个功能的需求不一样，后面的逻辑就不分享了，这是directive获取html页面参数的使用，贡献给大家，避免和我一样走很多弯路！

html directive 内容传递,directive的传值问题（全面解析directive的传值问题）微信分享实例...相关推荐

Android平台好友点击微信分享的内容后跳转来源App的实现方案研究
很多时候我们的应用在使用微信分享内容之后,希望其他用户点击该分享内容能够跳转到我们的App,以实现闭环,这样的分享才是最有价值的.这种需求涉及到不同应用之间的交互,虽然微信提供了分享SDK,但仍然有不 ...
在layui中使用ajax传值给后台,解决layui批量传值到后台操作时出现传值为空的问题...
如图,前台的样子,data的参数为 [ {"good_id":1,"good_name":"标样-总磷","good_num&qu ...
jsp页面页面post传值_几种JSP页面传值方式
2010-01-25 几种JSP页面传值方式: 文章分类:Web前端几种JSP页面传值方式: 1. 隐藏域传值: &ltform method="post" action ...
uniapp 微信小程序最近写的两个小程序中都会有，微信分享的设置，每次都在单个页面中写相同的内容，修改很不友好。下面全局分享代码做了记录
最近写的两个小程序中都会有,微信分享的设置,每次都在单个页面中写相同的内容,修改很不友好.下面全局分享代码做了割记录首先在小程序中配置微信分享,和微信朋友圈, onShareAppMessage, ...
CVPR 2020几篇论文内容点评：目标检测跟踪，人脸表情识别，姿态估计，实例分割等
CVPR 2020几篇论文内容点评:目标检测跟踪,人脸表情识别,姿态估计,实例分割等 CVPR 2020中选论文放榜后,最新开源项目合集也来了. 本届CPVR共接收6656篇论文,中选1470篇,&q ...
vue变量传值_vue组件与组件之间传值
目录一.父组件向子组件传值二.子组件向父组件传值三.兄弟组件之间的传值如上图所示,2是1的子组件,1是3的父组件,2和3是兄弟组件一.父组件向子组件传值: html代码: <div i ...
微信分享功能问题-描述内容换行，导致js加载失败
jsContent内容存在换行符,导致js处理失败, 解决办法,在后台接口中替换'/r/n'为空,并截取前30位 weiXinJsSdk.setSharcontent(StringUtils.isNo ...
微信分享内容给朋友、朋友圈、QQ、QQ空间等
示例网页 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta ...
2015最新微信分享功能开发，自定义分享内容。
在2015年之前很长一段时间,微信分享功能,只需要页面埋几段js代码即可捕获用户点击分享按钮的事情,并且自定义. 但后来微信的新版本里已经屏蔽了次方法直接调用分享接口需要在服务端坐一点开发工作. 当 ...
2021年起重机司机(限桥式起重机)考试内容及起重机司机(限桥式起重机)最新解析
题库来源:安全生产模拟考试一点通公众号小程序起重机司机(限桥式起重机)考试内容参考答案及起重机司机(限桥式起重机)考试试题解析由安全生产模拟考试一点通题库老师及起重机司机(限桥式起重机)操作证已考过 ...

html directive 内容传递,directive的传值问题（全面解析directive的传值问题）微信分享实例...

html directive 内容传递,directive的传值问题（全面解析directive的传值问题）微信分享实例...相关推荐

最新文章

热门文章