<country-select country_id="US"></country-select>
<country-select country_id="user.country"></country-select>
<country-select country_id="{{user.country}}"></country-select>
angular.module('picmonic.directives.country-select', [])
.directive('countrySelect', [function () {
return {
restrict: 'E',
scope: {
country_id: '='
},
link: function(scope, element, attrs) {
scope.countries = [
{
id: "BD",
name: "Bangladesh"
},
{
id: "BE",
name: "Belgium"
},
{
id: "BF",
name: "Burkina Faso"
},
{
id: "BG",
name: "Bulgaria"
},
{
id: "BA",
name: "Bosnia and Herzegovina"
},
{
id: "BB",
name: "Barbados"
},
{
id: "WF",
name: "Wallis and Futuna"
},
{
id: "BL",
name: "Saint Bartelemey"
},
{
id: "BM",
name: "Bermuda"
},
{
id: "BN",
name: "Brunei Darussalam"
},
{
id: "BO",
name: "Bolivia"
},
{
id: "BH",
name: "Bahrain"
},
{
id: "BI",
name: "Burundi"
},
{
id: "BJ",
name: "Benin"
},
{
id: "BT",
name: "Bhutan"
},
{
id: "JM",
name: "Jamaica"
},
{
id: "BV",
name: "Bouvet Island"
},
{
id: "BW",
name: "Botswana"
},
{
id: "WS",
name: "Samoa"
},
{
id: "BR",
name: "Brazil"
},
{
id: "BS",
name: "Bahamas"
},
{
id: "JE",
name: "Jersey"
},
{
id: "BY",
name: "Belarus"
},
{
id: "O1",
name: "Other Country"
},
{
id: "LV",
name: "Latvia"
},
{
id: "RW",
name: "Rwanda"
},
{
id: "RS",
name: "Serbia"
},
{
id: "TL",
name: "Timor-Leste"
},
{
id: "RE",
name: "Reunion"
},
{
id: "LU",
name: "Luxembourg"
},
{
id: "TJ",
name: "Tajikistan"
},
{
id: "RO",
name: "Romania"
},
{
id: "PG",
name: "Papua New Guinea"
},
{
id: "GW",
name: "Guinea-Bissau"
},
{
id: "GU",
name: "Guam"
},
{
id: "GT",
name: "Guatemala"
},
{
id: "GS",
name: "South Georgia and the South Sandwich Islands"
},
{
id: "GR",
name: "Greece"
},
{
id: "GQ",
name: "Equatorial Guinea"
},
{
id: "GP",
name: "Guadeloupe"
},
{
id: "JP",
name: "Japan"
},
{
id: "GY",
name: "Guyana"
},
{
id: "GG",
name: "Guernsey"
},
{
id: "GF",
name: "French Guiana"
},
{
id: "GE",
name: "Georgia"
},
{
id: "GD",
name: "Grenada"
},
{
id: "GB",
name: "United Kingdom"
},
{
id: "GA",
name: "Gabon"
},
{
id: "SV",
name: "El Salvador"
},
{
id: "GN",
name: "Guinea"
},
{
id: "GM",
name: "Gambia"
},
{
id: "GL",
name: "Greenland"
},
{
id: "GI",
name: "Gibraltar"
},
{
id: "GH",
name: "Ghana"
},
{
id: "OM",
name: "Oman"
},
{
id: "TN",
name: "Tunisia"
},
{
id: "JO",
name: "Jordan"
},
{
id: "HR",
name: "Croatia"
},
{
id: "HT",
name: "Haiti"
},
{
id: "HU",
name: "Hungary"
},
{
id: "HK",
name: "Hong Kong"
},
{
id: "HN",
name: "Honduras"
},
{
id: "HM",
name: "Heard Island and McDonald Islands"
},
{
id: "VE",
name: "Venezuela"
},
{
id: "PR",
name: "Puerto Rico"
},
{
id: "PS",
name: "Palestinian Territory"
},
{
id: "PW",
name: "Palau"
},
{
id: "PT",
name: "Portugal"
},
{
id: "SJ",
name: "Svalbard and Jan Mayen"
},
{
id: "PY",
name: "Paraguay"
},
{
id: "IQ",
name: "Iraq"
},
{
id: "PA",
name: "Panama"
},
{
id: "PF",
name: "French Polynesia"
},
{
id: "BZ",
name: "Belize"
},
{
id: "PE",
name: "Peru"
},
{
id: "PK",
name: "Pakistan"
},
{
id: "PH",
name: "Philippines"
},
{
id: "PN",
name: "Pitcairn"
},
{
id: "TM",
name: "Turkmenistan"
},
{
id: "PL",
name: "Poland"
},
{
id: "PM",
name: "Saint Pierre and Miquelon"
},
{
id: "ZM",
name: "Zambia"
},
{
id: "EH",
name: "Western Sahara"
},
{
id: "RU",
name: "Russian Federation"
},
{
id: "EE",
name: "Estonia"
},
{
id: "EG",
name: "Egypt"
},
{
id: "TK",
name: "Tokelau"
},
{
id: "ZA",
name: "South Africa"
},
{
id: "EC",
name: "Ecuador"
},
{
id: "IT",
name: "Italy"
},
{
id: "VN",
name: "Vietnam"
},
{
id: "SB",
name: "Solomon Islands"
},
{
id: "EU",
name: "Europe"
},
{
id: "ET",
name: "Ethiopia"
},
{
id: "SO",
name: "Somalia"
},
{
id: "ZW",
name: "Zimbabwe"
},
{
id: "SA",
name: "Saudi Arabia"
},
{
id: "ES",
name: "Spain"
},
{
id: "ER",
name: "Eritrea"
},
{
id: "ME",
name: "Montenegro"
},
{
id: "MD",
name: "Moldova, Republic of"
},
{
id: "MG",
name: "Madagascar"
},
{
id: "MF",
name: "Saint Martin"
},
{
id: "MA",
name: "Morocco"
},
{
id: "MC",
name: "Monaco"
},
{
id: "UZ",
name: "Uzbekistan"
},
{
id: "MM",
name: "Myanmar"
},
{
id: "ML",
name: "Mali"
},
{
id: "MO",
name: "Macao"
},
{
id: "MN",
name: "Mongolia"
},
{
id: "MH",
name: "Marshall Islands"
},
{
id: "MK",
name: "Macedonia"
},
{
id: "MU",
name: "Mauritius"
},
{
id: "MT",
name: "Malta"
},
{
id: "MW",
name: "Malawi"
},
{
id: "MV",
name: "Maldives"
},
{
id: "MQ",
name: "Martinique"
},
{
id: "MP",
name: "Northern Mariana Islands"
},
{
id: "MS",
name: "Montserrat"
},
{
id: "MR",
name: "Mauritania"
},
{
id: "IM",
name: "Isle of Man"
},
{
id: "UG",
name: "Uganda"
},
{
id: "TZ",
name: "Tanzania, United Republic of"
},
{
id: "MY",
name: "Malaysia"
},
{
id: "MX",
name: "Mexico"
},
{
id: "IL",
name: "Israel"
},
{
id: "FR",
name: "France"
},
{
id: "IO",
name: "British Indian Ocean Territory"
},
{
id: "FX",
name: "France, Metropolitan"
},
{
id: "SH",
name: "Saint Helena"
},
{
id: "FI",
name: "Finland"
},
{
id: "FJ",
name: "Fiji"
},
{
id: "FK",
name: "Falkland Islands (Malvinas)"
},
{
id: "FM",
name: "Micronesia, Federated States of"
},
{
id: "FO",
name: "Faroe Islands"
},
{
id: "NI",
name: "Nicaragua"
},
{
id: "NL",
name: "Netherlands"
},
{
id: "NO",
name: "Norway"
},
{
id: "NA",
name: "Namibia"
},
{
id: "VU",
name: "Vanuatu"
},
{
id: "NC",
name: "New Caledonia"
},
{
id: "NE",
name: "Niger"
},
{
id: "NF",
name: "Norfolk Island"
},
{
id: "NG",
name: "Nigeria"
},
{
id: "NZ",
name: "New Zealand"
},
{
id: "NP",
name: "Nepal"
},
{
id: "NR",
name: "Nauru"
},
{
id: "NU",
name: "Niue"
},
{
id: "CK",
name: "Cook Islands"
},
{
id: "CI",
name: "Cote d'Ivoire"
},
{
id: "CH",
name: "Switzerland"
},
{
id: "CO",
name: "Colombia"
},
{
id: "CN",
name: "China"
},
{
id: "CM",
name: "Cameroon"
},
{
id: "CL",
name: "Chile"
},
{
id: "CC",
name: "Cocos (Keeling) Islands"
},
{
id: "CA",
name: "Canada"
},
{
id: "CG",
name: "Congo"
},
{
id: "CF",
name: "Central African Republic"
},
{
id: "CD",
name: "Congo, The Democratic Republic of the"
},
{
id: "CZ",
name: "Czech Republic"
},
{
id: "CY",
name: "Cyprus"
},
{
id: "CX",
name: "Christmas Island"
},
{
id: "CR",
name: "Costa Rica"
},
{
id: "CV",
name: "Cape Verde"
},
{
id: "CU",
name: "Cuba"
},
{
id: "SZ",
name: "Swaziland"
},
{
id: "DZ",
name: "Algeria"
},
{
id: "US",
name: "United States"
},
{
id: "UY",
name: "Uruguay"
},
{
id: "YT",
name: "Mayotte"
},
{
id: "UM",
name: "United States Minor Outlying Islands"
},
{
id: "LB",
name: "Lebanon"
},
{
id: "LC",
name: "Saint Lucia"
},
{
id: "LA",
name: "Lao People's Democratic Republic"
},
{
id: "TV",
name: "Tuvalu"
},
{
id: "TW",
name: "Taiwan"
},
{
id: "TT",
name: "Trinidad and Tobago"
},
{
id: "TR",
name: "Turkey"
},
{
id: "LK",
name: "Sri Lanka"
},
{
id: "LI",
name: "Liechtenstein"
},
{
id: "A1",
name: "Anonymous Proxy"
},
{
id: "TO",
name: "Tonga"
},
{
id: "LT",
name: "Lithuania"
},
{
id: "A2",
name: "Satellite Provider"
},
{
id: "LR",
name: "Liberia"
},
{
id: "LS",
name: "Lesotho"
},
{
id: "TH",
name: "Thailand"
},
{
id: "TF",
name: "French Southern Territories"
},
{
id: "TG",
name: "Togo"
},
{
id: "TD",
name: "Chad"
},
{
id: "TC",
name: "Turks and Caicos Islands"
},
{
id: "LY",
name: "Libyan Arab Jamahiriya"
},
{
id: "VA",
name: "Holy See (Vatican City State)"
},
{
id: "VC",
name: "Saint Vincent and the Grenadines"
},
{
id: "AE",
name: "United Arab Emirates"
},
{
id: "AD",
name: "Andorra"
},
{
id: "AG",
name: "Antigua and Barbuda"
},
{
id: "AF",
name: "Afghanistan"
},
{
id: "AI",
name: "Anguilla"
},
{
id: "VI",
name: "Virgin Islands, U.S."
},
{
id: "IS",
name: "Iceland"
},
{
id: "IR",
name: "Iran, Islamic Republic of"
},
{
id: "AM",
name: "Armenia"
},
{
id: "AL",
name: "Albania"
},
{
id: "AO",
name: "Angola"
},
{
id: "AN",
name: "Netherlands Antilles"
},
{
id: "AQ",
name: "Antarctica"
},
{
id: "AP",
name: "Asia/Pacific Region"
},
{
id: "AS",
name: "American Samoa"
},
{
id: "AR",
name: "Argentina"
},
{
id: "AU",
name: "Australia"
},
{
id: "AT",
name: "Austria"
},
{
id: "AW",
name: "Aruba"
},
{
id: "IN",
name: "India"
},
{
id: "AX",
name: "Aland Islands"
},
{
id: "AZ",
name: "Azerbaijan"
},
{
id: "IE",
name: "Ireland"
},
{
id: "ID",
name: "Indonesia"
},
{
id: "UA",
name: "Ukraine"
},
{
id: "QA",
name: "Qatar"
},
{
id: "MZ",
name: "Mozambique"
}
];
},
replace: true,
template: '<select class="form-control"><option ng-repeat="country in countries | orderBy: \'name\'" ng-selected="country.id == scope.country_id" ng-value="country.id">{{country.name}}</option></select>'
};
}]);
问题是下拉列表未将默认值设置为US。我已经尝试过几乎所有事情并且无法弄清楚为什么它没有设置默认值：/
关于如何解决此问题的任何想法？
谢谢， 迈克尔
答案 0 :(得分：1)
注意：指令范围选项中的这些= attr属性是 标准化就像指令名称一样。要绑定到属性，您需要指定绑定= bindToThis。
您的代码的问题在于隔离范围内的属性名称，以及您在模板中如何使用它。上面的引用说如果你想在你的指令上使用 country_id 属性，如下所示：
<country-select country_id="US"></country-select>
您可以将 countryId 指定为指令的隔离范围内的属性，如下所示：
scope: {
countryId: '='
}
在模板中，您只需使用 countryId ，这是隔离范围内的属性。
template: '<select class="form-control"><option ng-repeat="country in countries | orderBy: \'name\'" ng-selected="country.id == countryId" ng-value="country.id">{{country.name}}</option></select>'
就是这样。有关详细信息，请阅读Creating Custom Directives。这里还有一个有效的plunker