angularjs вложенная каскадная директива для выпадающего списка

Question

Я хочу создать каскадную директиву выпадающего списка.

<my-dropdown label="states" url="http://statelisturl">  
    <my-dropdown label="cities" url="http://citylisturl"> 
    </my-dropdown> 
</my-dropdown> 

Но штаты будут перечислены первыми, когда я выберу города штата, вы получите от url.

Возможно ли это для angularjs технически? Или я должен быть разделенной директивой для каждого выпадающего списка?

Answer 1

Вы могли бы сделать что-то вроде этого:

.directive("myDropdown", function() { 
    return { 
     restrict: "E", 
     require: ["myDropdown", "?^^myDropdown"], 
     template: "<select ng-options='opt as opt.label for opt in $ctrl.options' ng-model='$ctrl.selectedOption' ng-change='$ctrl.changed($ctrl.selectedOption)'></select><div ng-transclude></div>", 
     scope: true, 
     bindToController: { 
      url: "@", 
      label: "@" 
     }, 
     controller: function($scope, $http) { 
      var _self = this; 
      _self.init = function() { 
       $http.get(_self.url).then(function(response) { 
        _self.options = response.data; 
       }); 
      } 
      _self.parentChanged = function(item) { 
       var id = item.id; 
       $http.get(_self.url + "?id=" + id).then(function(response) { 
        _self.options = response.data; 
       }); 
      } 
     }, 
     link: function(scope, element, attrs, ctrls) { 
      var ctrl = ctrls[0]; 
      var parentCtrl = ctrls[1]; 

      if (parentCtrl) { 
       scope.$watch(function() { 
        return parentCtrl.selectedOption; 
       }, function(newval) { 
        if (newval) { 
         ctrl.parentChanged(newval); 
        } 
       }); 
      } else { 
       ctrl.init(); 
      } 
     }, 
     controllerAs: "$ctrl", 
     transclude: true 
    } 
}); 

EDIT: У меня есть рабочий пример here