Javascript 如何将自定义语义ui下拉列表绑定到angularjs指令

有两个下拉列表，第二个下拉列表获取第一个下拉列表所选国家的州。问题是，使用semanticui的菜单，选择某个内容时，

data ng model='selectedCountry'

值保持未定义，而我的第二个下拉列表保持为空。如何从语义菜单中获取

selectedCountry

。（当我将

与

一起使用时，这对我很有效）

加成
指示
函数countrystate（$scope，$http）{
返回{
限制：“EA”，
范围：假，
模板：`
国家
选择国家
{{country.name}


陈述
请选择一个状态
{{state.name}
`,
链接：功能（范围、元素）{
元素上（'click'，function（））{
});
$（'.ui.dropdown'）.dropdown（）；
元素。下拉列表（）；
}
}
}

笔记
我想使用Semantici菜单下拉菜单，这样我就可以包含国家图像标志，这是常规html无法做到的
您可以将普通html选择设置为语义下拉菜单。您只需要添加
$（'.ui.dropdown'）.dropdown（）。也许这会有帮助，我想使用图像标志，但如果我使用普通的html选择，我不能使用它们@DylanVanderBerg@JonathanPortorreal你找到绑定下拉列表的解决方案了吗？@cascadox是的，我找到了，我利用了类命名约定，因为它使用类名来获取标志图标。您可以将普通的html select格式化为语义下拉列表。您只需要添加
$（'.ui.dropdown'）.dropdown（）。也许这会有帮助，我想使用图像标志，但如果我使用普通的html选择，我不能使用它们@DylanVanderBerg@JonathanPortorreal您找到绑定下拉列表的解决方案了吗？@cascadox是的，我利用了类命名约定，因为它使用类名来获取标志图标
<div ng-controller="loader">
    <div>
        <countrystate></countrystate>
    </div>
</div>

function loader($scope, $http) {
     var data = $http.get('Scripts/provinces.json');

     data.then(function (res) {
         $scope.Countries = res.data.countries;
         $scope.States = res.data.provinces;
     });

     data.catch(function (err) {
         console.log("error on : " + err);
     });

     $scope.getStates = function () {
         console.log("selected states: " + $scope.States);
         console.log("selected country " + $scope.Countries);

             var states = $scope.States.filter(function (state) {
                 return state.country === $scope.selectedCountry;
             });
             return states;

     }

    $scope.getFlag = function () {
        console.log(code.toLowerCase() + " flag");
        return code.toLowerCase() + " flag";
     }

 }

function countrystate($scope, $http) {

    return {
        restrict: 'EA',
        scope: false,
        template: `
<div class="input-group">
  <span class="input-group-addon" id="CountryLabel">Country</span>
  <div class="ui fluid search selection dropdown">
    <input data-ng-model='selectedCountry' />
    <i class="dropdown icon"></i>
    <div class="default text">Select Country</div>
    <div id="CountryMenu" class="menu">
      <div ng-repeat='country in Countries' class="item" id='{{country.name}}' value='{{country.code}}' onclick="$('#Country').val(this.id)"><i class="us flag"></i>{{country.name}}</div>

    </div>
  </div>
</div>

<br />
<div class='input-group'>
  <span class='input-group-addon' id='StateLabel'>State</span>
  <select data-ng-model='selectedState' class='ui fluid search selection dropdown'>
       <option value=''>Please select a state</option>
       <option ng-repeat='state in getStates()' id='{{state.name}}' value='{{state.code}}' onclick="$('#State').val(this.id)">{{state.name}}</option>
  </select>
</div>
                        `,
        link: function(scope, element) {

            element.on('click', function() {
            });

            $('.ui.dropdown').dropdown();
            element.dropdown();

        }
    }
}