angular.js實現省市區三級聯動指令

很少說，直接上代碼，一開始搞了很久，最後才弄懂，但願對你們有幫助

1.jade

 

div.col-md-2
    select.form-control(ng-options="value.code as value.name for value in provincial" ng-model="info.provincial" required='' ng-change="getArea('city',info.provincial)")
        option(value='') 選擇省
div.col-md-2 
    select.form-control(ng-options="value.code as value.name for value in city" ng-model="info.city" required='' ng-change="getArea('district',info.city)")
        option(value='') 選擇市
div.col-md-2
    select.form-control(ng-options="value.code as value.name for value in district" ng-model="info.district" required='' ng-change="areaText()")
        option(value='') 選擇區

 

 

js

　　

　　傳的值

　　後臺返回的數據 省

　　

 　　

　　傳的值

　　後臺返回的數據 市

　　

 

angular.module('app').directive('provinceSelect', ['$rootScope', 'api', function($rootScope, api) {
    // Runs during compile
    'use strict';
    return {
        // name: '',
        // priority: 1,
        // terminal: true,
        scope: {
            info: '=info',
            area: '=area'
        }, // {} = isolate, true = child, false/undefined = no change
        controller: function($scope, $element, $attrs, $transclude) {
            function getArea(id, returnFn) {
                api("areaList", { //後臺給的省市區接口
                    data: {
                        parentId: id
                    }
                }).then(function(data) {
                    returnFn(data);
                });
            }
            $scope.getArea = function(name, id) {
                if (name === 'city' && id === undefined) {
                    $scope.city = [];
                    $scope.district = [];
                    return;
                } else if (name === 'district' && id === undefined) {
                    $scope.district = [];
                    return;
                }
                getArea(id || 0, function(data) {
                    $scope[name] = data;
                });
            };
            $scope.getArea('provincial', 0);
            $scope.$watch('info', function(newVal, oldVal) {
                if (newVal) {
                    $scope.getArea('city', newVal.provincial);
                    $scope.getArea('district', newVal.city);

                }
            });
            // provincialWatch();
            // if ($scope.info.provincial) {
            //     $scope.getArea('city', $scope.provincial);
            // }
            // if ($scope.info.district) {
            //     $scope.getArea('district', $scope.city);
            // }
            $scope.areaText = function() {
                var area = $element.find("select");
                var areas = '';
                for (var i = 0; i < area.length; i++) {
                    var index = area[i].selectedIndex;
                    if (index === 0) {continue;}
                    areas += area[i].options[index].text;
                }
                $scope.area = areas;
            };
        },
        // require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
        // restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
        // template: '',
        templateUrl: 'app/dist/directive/provinceSelect/provinceSelect.html',
        // replace: true,
        transclude: true,
        // compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
        link: function($scope, iElm, iAttrs, controller) {
            //console.log($scope)
        }
    };
}]);