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.
