2015-08-21 4 views
0
<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>' 
    }; 
}]); 

Проблема заключается в том, что выпадающее меню не устанавливает значение по умолчанию для США. Я пробовал практически все и не могу понять, почему он не устанавливает значение по умолчанию:/Директива о выезде из страны Angularjs с выделенной областью выпуска

Любые идеи о том, как я могу это исправить?

Спасибо, Майкла

+0

Я не могу получить доступ к country_id из моей функции связи. Почему это? –

ответ

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

+0

Спасибо вам большое за вашу помощь, я очень ценю это! –

Смежные вопросы