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页面参数的使用，贡献给大家，避免和我一样走很多弯路！