Angularjs directive 指令复用,指令传参

原创 2016年08月30日 16:57:23

效果图这里写图片描述
html 同一个页面使用多次指令集,传入不同的参数

<select-option title="测试2的名字" group="sex" >
</select-option>

<select-option title="测试1的名字" group="sex1">       
</select-option>

js 指令

app.directive('selectOption', function($http){
    return{
        restrict:'E',
        scope :true ,
        link:function(scope, element, attrs) {
            scope.title = attrs.title;
            scope.group = attrs.group;
            scope.list = attrs.group;
            var data = {
                     'groupName':attrs.title
            };
            scope.ceshi = function(a){
                alert(a);
            };
            $http.post('/datadicItem/findItemsByGroupName',data,         postCfg)
                 .success(function(resp){
                     // debugger
                     scope.list = resp;
                     console.log(scope.list);
                 });
        },
        template:'<div style="text-align:center;height:330px;">'+
        '<span class="r" style="margin-top:4px;width:120px;"> '+
        '<span  style="vertical-align: 12px;">&nbsp;&nbsp;{{title}}'+
        '<select style="margin-left:5px;"'+
                'ng-model="group"'+
                'ng-change="ceshi(group)"'+
                'ng-options="act.id as act.itemname for act in list">'+'<option value="">'+'--请选择--'+'</option>'+
            '</select>'+
        '</span>'+
        '</span>'+
        '</div>',
        replace:true,
    };
});

解释
html 页面内 title 与 group的参数传入指令集内,指令集通过 attrs获取传入的参数,然后执行http 调用后台接口获取数据展示到页面。由于页面内有两个指令,并且传入的参数不同,所以需要隔离作用域才能防止这两个指令从后台获取的数据混淆。隔离作用域的关键代码:scope :true 或者 scope :{}
补充
ceshi()方法是可以显示select选中元素的id。
希望对学习Angularjs的程序员有所帮助!
如有疑问可以私聊我。

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

angularJS directive的参数传递一直比较模糊 现记录下来以便日后学习
  • baidu_26611019
  • baidu_26611019
  • 2017年01月16日 12:00
  • 3380

angular笔记 directive scope 调用父scope带参数方法

在使用angular directive的时候,为了不污染环境,我们为给directive自己一个scope,如果这个scope需要使用父类中scope的对象,会使用 = & @三种标示,在开发项目中...
  • ft6302244
  • ft6302244
  • 2015年03月23日 09:41
  • 7166

AngularJS指令参数详解

指令,很重要 AngularJS与JQuery最大的区别在哪里?我认为,表现在数据双向绑定,实质就是DOM的操作形式不一样。 JQuery通过选择器找到DOM元素,再赋予元素的行为; ...
  • kongjiea
  • kongjiea
  • 2015年11月14日 22:26
  • 31257

directive的传值问题(全面解析directive的传值问题)微信分享实例

(一)开发人员可以使用directive自定义angularjs的指令,定义指令的类型有"A"、"E"、"C"、"EAC",这个过程比较简单,就不加说明了,当你定义好指令之后,问题来了,你怎么把htm...
  • ILV_XJ
  • ILV_XJ
  • 2017年05月09日 18:21
  • 984

AngularJS之directive指令参数

AngularJS之directive指令参数
  • DeepLies
  • DeepLies
  • 2016年09月03日 15:41
  • 1670

跟我学AngularJs:Directive指令用法解读(上)

Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一。它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性,并且它不只是单单如此,你还可以在它的基础上来操...
  • Evankaka
  • Evankaka
  • 2016年04月24日 15:58
  • 15485

angular-directive各个参数介绍

这篇文章只是介绍,加深理解,这里有篇例子的博客写的不错,感兴趣的可以看看 http://damoqiongqiu.iteye.com/blog/1917971 作用:自定义html中的组件(说白了...
  • qq_34134278
  • qq_34134278
  • 2017年03月22日 18:39
  • 1053

AngularJs1.x自定义指令独立作用域的函数传入参数

在定义指令的scope属性如果设置成了{},那就成为了一个独立作用域,如果要传入一个方法,使用&,但是这里的传参有点不一样。先看下官网解释: & or &attr - provides a way...
  • meloseven
  • meloseven
  • 2017年04月07日 16:16
  • 1225

关于angular中controller和指令交互数据:@

首先看代码: html: bb.js var app ...
  • ltyisangel
  • ltyisangel
  • 2015年11月18日 13:02
  • 4740

angularjs中如何实现控制器和指令之间交互

如果我们具有下面的DOM结构: 滑动加载 同时我们的控制器具有如下的签名: var myModule = angular.module("MyModule", []); /...
  • liangklfang
  • liangklfang
  • 2016年05月04日 16:37
  • 7532
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Angularjs directive 指令复用,指令传参
举报原因:
原因补充:

(最多只允许输入30个字)