Hi Vanya,
Thanks a lot for your reply, you made my day it works like a charm !
I think this is something specific to the built in "select" directive.
Anyway, thanks again :-)
Best
Daniel
On Saturday, January 25, 2014 4:28:53 AM UTC+1, Vanya Dineva wrote:
>
> Hi Daniel,
>
> I'm not quite sure why, but it seems like if you put in
> ng-model='anything' in your directive before compiling, it does generate
> the dropdown options.
> e.g.:
>
> elm = angular.element('<form><select-country ng-model="whatever"></select-
> country></form>');
>
> Hope this helps you
>
>
> On Wednesday, January 22, 2014 3:49:25 PM UTC-5, Daniel Kobler wrote:
>>
>> Hi everyone,
>>
>> I've created a small directive for creating a select box with all the
>> countries inside.
>>
>> The directive code is as follow:
>>
>> <select-country id="billingAddressCountry" name="billingAddressCountry"
>> class="form-control"
>> ng-model="account.billingAddress.country"></select-country>
>>
>> My directive is defined like this:
>>
>> angular.module('myApp').directive('selectCountry', ['$parse', function
>> ($parse) {
>> return {
>> restrict: 'E',
>> template: '<select ng-options="country.value as country.name for
>> country in countries"></select>',
>> controller: ['$scope', 'countries', function($scope,
>> countriesService) {
>> $scope.countries = [];
>> angular.forEach(countriesService.getCountryCodes(),
>> function(countryCode) {
>> $scope.countries.push({value:countryCode,
>> name:countriesService.getCountryName(countryCode)});
>> });
>> // The countries are sorted in alphabetical order
>> $scope.countries.sort(function(a, b) {
>> if (a.name < b.name) {
>> return -1;
>> }
>> if (a.name > b.name) {
>> return 1;
>> }
>> return 0;
>> });
>> }],
>> replace: true,
>> link: function (scope, elem, attrs) {
>> if (!!attrs.ngModel) {
>> var assignCountry = $parse(attrs.ngModel).assign;
>>
>> elem.bind('change', function (e) {
>> assignCountry(elem.val());
>> });
>>
>> scope.$watch(attrs.ngModel, function (country) {
>> elem.val(country);
>> });
>> }
>> }
>> };
>> }]);
>>
>> As you see my directive relies on a Service called "countries".
>> Here it is:
>>
>> angular.module('myApp').service('countries', function () {
>> this.countryCodes = [
>>
>> "AD","AE","AF","AG","AI","AL","AM","AN","AO","AQ","AR","AS","AT","AU","AW","AX","AZ","BA","BB","BD","BE","BF","BG",
>>
>> "BH","BI","BJ","BL","BM","BN","BO","BR","BS","BT","BV","BW","BY","BZ","CA","CC","CD","CF","CG","CH","CI","CK","CL",
>>
>> "CM","CN","CO","CR","CS","CU","CV","CX","CY","CZ","DE","DJ","DK","DM","DO","DZ","EC","EE","EG","EH","ER","ES","ET",
>>
>> "FI","FJ","FK","FM","FO","FR","GA","GB","GD","GE","GF","GG","GH","GI","GL","GM","GN","GP","GQ","GR","GS","GT","GU",
>>
>> "GW","GY","HK","HM","HN","HR","HT","HU","ID","IE","IL","IM","IN","IO","IQ","IR","IS","IT","JE","JM","JO","JP","KE",
>>
>> "KG","KH","KI","KM","KN","KP","KR","KW","KY","KZ","LA","LB","LC","LI","LK","LR","LS","LT","LU","LV","LY","MA","MC",
>>
>> "MD","ME","MF","MG","MH","MK","ML","MM","MN","MO","MP","MQ","MR","MS","MT","MU","MV","MW","MX","MY","MZ","NA","NC",
>>
>> "NE","NF","NG","NI","NL","NO","NP","NR","NU","NZ","OM","PA","PE","PF","PG","PH","PK","PL","PM","PN","PR","PS","PT",
>>
>> "PW","PY","QA","QO","QU","RE","RO","RS","RU","RW","SA","SB","SC","SD","SE","SG","SH","SI","SJ","SK","SL","SM","SN",
>>
>> "SO","SR","ST","SV","SY","SZ","TC","TD","TF","TG","TH","TJ","TK","TL","TM","TN","TO","TR","TT","TV","TW","TZ","UA",
>>
>> "UG","UM","US","UY","UZ","VA","VC","VE","VG","VI","VN","VU","WF","WS","YE","YT","ZA","ZM","ZW","ZZ"
>> ];
>>
>> /**
>> * Return the country codes
>> * @returns {String[]}
>> */
>> this.getCountryCodes = function() {
>> return this.countryCodes;
>> };
>>
>> /**
>> * Return the translated country name
>> * @param {String} countryCode The country code
>> * @returns {String}
>> */
>> this.getCountryName = function(countryCode) {
>> // The country code will be translated there but in order to
>> simplify let's return the country code as well
>> return countryCode;
>> };
>> });
>>
>>
>> Everything works perfectly but my issue comes when I want to unit test it
>> properly.
>> I try the following code:
>>
>> 'use strict';
>>
>> describe('crmApp.common.directives.selectCountry', function() {
>> var scope, elm;
>>
>> // load the controller's module
>> beforeEach(module('myApp'));
>>
>> beforeEach(inject(function($rootScope, $compile) {
>> elm =
>> angular.element('<form><select-country></select-country></form>');
>>
>> scope = $rootScope;
>> $compile(elm)(scope);
>> scope.$digest();
>> }));
>>
>>
>> it('should render a list', function() {
>> console.log(elm.html());
>> });
>>
>> });
>>
>> When I run the following test I got:
>> <select ng-options="country.value as country.name for country in
>> countries"></select>
>>
>> This is fine, as the directive has been replaced by the select directive
>> properly.
>> But I would like to test the "final" stage, this mean after the
>> transformation of this directive (the "select" one).
>>
>> In fact I would like to be able to test the number of "option" elements
>> that are rendered under the select tag.
>>
>> How can I do this ?
>>
>> Thanks In advance
>> Daniel
>>
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.
