angularjs指令

组件主要起到了 复用性 和 可维护性的优点,在angularjs中使用指令就能达到这种效果
如果多个页面都需要使用同一套代码时,可以将这套代码封装成指令,在不同的页面进行调用
https://www.cnblogs.com/cunjieliu/p/4231353.html

指令代码
angular.module('app').directive('districtPool', function (AppConfig, cloudService) {
  return {
    restrict: 'EA',
    require: 'ngModel',
    scope: {
      option: '=option'  //key相同时也可以使用option: '=',
      serviceType: "@",
    },
    replace: true,
    templateUrl: 'directive/district-pool/district-pool.html',
    link: function (scope, element, attr,ngModel) {
    	// 监听serviceType的改变
    	scope.$watch('serviceType',function(newValue,oldValue) {
    		if(newValue && (newValue !=oldValue ) {
    			.......
    		})
    	})
      // 获取区域
      cloudService.getZoneList().success(function (response) {

        if (response.success) {
          scope.poolZones = response.entity.list
        } else {
          scope.poolZones = []
        }
      }).error(function (error) {
        console.log(error)
      })
      //修改区域
      scope.changdPoolZone = function (infor) {

        scope.districtId = infor.id;

        scope.districtName = infor.name;

        // 根据区域id获取对应的资源池
        cloudService.getPoolList(infor.id).success(function (response) {
          if (response.success) {
            scope.pools = response.entity.list;
          } else {
            scope.pools = [];
          }

        }).error(function (error) {
          console.log(error)
        })
      }
      scope.hidden = true;

      //选择资源池操作
      scope.selectPool = function (resourceInfor) {
        scope.resourceId = resourceInfor.id
        scope.serviceName = scope.districtName + resourceInfor.name
        scope.hidden = false;
        // 传到指令中的数据
        console.log(scope.option)
        ngModel.$setViewValue({"districtId":scope.districtId,"poolId":scope.resourceId});

      }


    }
  };
})

HTML代码
<div class="cloud-service">
    <label>云服务区</label>
    <div class="pool-select">
        <span class="pool-selected"><i ng-show="hidden">请选择云服务区</i>{{serviceName}}<i
                class="fa fa-angle-down"></i></span>
        <div class="pool-main">
            <ul class="select-zone">
                <li ng-repeat="item in poolZones track by $index" ng-class="{'active':item.id== districtId}"
                    ng-click="changdPoolZone(item)" title="{{item.name}}">{{item.name}}<i class="fa fa-angle-right"></i>
                </li>
            </ul>
            <ul class="select-pool">
                <li ng-repeat="pool in pools track by $index" title="{{pool.name}}" 
                    ng-click="selectPool(pool)">{{pool.name}}</li>
            </ul>
        </div>
    </div>
</div>

在需要的页面进行调用
将数据传入到指令中
<district-pool  ng-model="ctrl.selectedDistriPool" option="{title:123}" service-type = {{ctrl.service}}></district-pool>
在js中打印 console.log(vm.selectedDistriPool)    // 结果{"districtId":scope.districtId,"poolId":scope.resourceId}