Angularjs directive 指令复用，指令传参 _angularjs指令

效果图

文章插图
html 同一个页面使用多次指令集，传入不同的参数

js 指令
【Angularjs directive 指令复用，指令传参】

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 = http://www.kingceram.com/post/{'groupName':attrs.title};scope.ceshi = function(a){alert(a);};$http.post('/datadicItem/findItemsByGroupName',data,postCfg).success(function(resp){// debuggerscope.list = resp;console.log(scope.list);});},template:'text-align:center;height:330px;">'+'" style="margin-top:4px;width:120px;"> '+'12px;">  {{title}}'+'5px;"'+'ng-model="group"'+'ng-change="ceshi(group)"'+'ng-options="act.id as act.itemname for act in list">'+''+''+''+''+'',replace:true,};});

解释
html 页面内 title 与 group的参数传入指令集内，指令集通过 attrs获取传入的参数，然后执行http 调用后台接口获取数据展示到页面。由于页面内有两个指令，并且传入的参数不同，所以需要隔离作用域才能防止这两个指令从后台获取的数据混淆。隔离作用域的关键代码：scope :true 或者 scope :{}

文章插图
补充
ceshi()方法是可以显示选中元素的id 。
希望对学习的程序员有所帮助！
如有疑问可以私聊我。