Angularjs自定义指令实现通用下拉选择框

最新推荐文章于 2024-08-01 16:27:33 发布

梦里梦见醒不来丶

最新推荐文章于 2024-08-01 16:27:33 发布

阅读量1.1k

点赞数 1

分类专栏：前端文章标签： angularjs 指令 directive

本文链接：https://blog.csdn.net/xujiangdong1992/article/details/82898057

版权

前端专栏收录该内容

33 篇文章 1 订阅

订阅专栏

注释写的比较清楚了吧。。。

指令

bptconfig.directive('appnameSelect', function () {
    return {
        restrict:"EA",//E:元素  A:属性 C:样式类  M:注释
        replace: true,
        scope:{//@：从父级获取值后便只在本地作用域生效  = ：同父级controller中的指定对象双向绑定  &：从父级获取一个变量的引用，常用作方法调用
            serviceName:'@',//service bean  后端根据这个值获取下拉数据 
            disabledType:'@',//是否可点击  true:是  false:否
            selectData:'=',//选中的值
            selectChange:"&",//选择事件
        },
        //模板 --模板代码多的情况下用templateUrl吧
        template:'<select ng-disabled="{{disabledType}}" ng-model=selectData class="form-control" ng-options="o.id as o.appName for o in appDatas"></select>',
        controller:['$scope','$http','$filter',function (scope,$http,$filter) {
        	//获取下拉选择数据
            $http({
                method:'POST',
                url:'role/getSelectData?serviceName='+scope.serviceName
            }).success(function (response) {
                scope.appDatas = response;
                //设置下拉框初始值
                if(scope.disabledType=='false' && response.length>0){
                    scope.selectData = response[0].id;
                }
            });
        }],
        link:function (scope,elements,attrs,controller) {
            //监听选择事件并交给父级处理（也可以在指令中处理，看具体使用场景）  
            scope.$watch('selectData',function () {
                scope.selectChange();
            })
        }
    }
})

页面使用

<appname-select select-change="changeSelect()"  select-data="data.appId"  
disabled-type="{{editType=='edit'}}"  service-name="appnameService"></appname-select>