Angularjs指令实现下拉框效果（动态获取接口的数据）

 <select cam-dictionaries-type="333"></select>

实现一个下拉框效果

cam-dictionaries-type是需要写的指令代码，“333”是参数，后台根据参数获取接口，动态的

开始：

ngModule.directive('camDictionariesType', ['$rootScope', '$http', 'Uri',function ($rootScope,$http, Uri) {
  return {
    restrict : 'A',//指令的类型，不能用错了
    // require : '?ngModel',
    // scope:{
      // optionDatas:'=',
      // camDictionariesType:'@'//@是单向绑定，=是双向绑定，切记不能随便用
    // },

    link : function(scope, element, attrs) {//scope是作用域，一般情况用scope，
        var param = {};
        param.type = attrs.camDictionariesType;//这这个是获取绑定的参数，比如333，
        var reqCity = {
          url: Uri.appUri("plugin://common-plugin/getDictionariesList"),
          method: 'POST',
          params: param,    //传入已封装的参数
          headers: {
            'Content-Type': 'application/json'
          }
        }
        $http(reqCity).then(function (data) {//调用接口，获取后台数据
          console.log('data',data);

          scope.selectData = data;
          var html = "<option disabled selected value>-- 请选择 --</option>";

          console.log("hhhh调试");
          var optionDatas=scope.selectData;
          var options = optionDatas.data;
          if (options != undefined&&options.length>0&&options[0].dictionariesName!= undefined){
            for (var i=0;i<options.length;i++){//这一步是拼写option，相当于select的option，为了下拉框的效果
              var name = options[i].dictionariesName;
              var id = options[i].dictionariesValue;
              html += "<option style='font-size: 10px' value="+id+">"+name+"</option>";
              //此处的id和name是后台取值和页面显示的值，按照你们的自己需求可以更改的
            }
          } else {
            html = "";
          }
          $(element).html(html);
          // $(element).selectpicker('refresh');
          // if (ngModel.$modelValue) {
          //   $(element).selectpicker('val', ngModel.$modelValue);
          // }
        }, function (data) {
          console.error(data);
          scope.selectData = [];
        });
    }
  };
}]);

注意：在调试的过程中，注意多写点日志，看哪一步出现的问题，类似这种：console.log("hhhh调试");

最终实现的效果：

调试的过程，已经生效