Skip to content
This repository has been archived by the owner on Nov 24, 2018. It is now read-only.

Commit

Permalink
feat(valdrMessage): Support isolated scopes for valdr-message directi…
Browse files Browse the repository at this point in the history 
…ve, closes #32
  • Loading branch information
Philipp Denzler committed Jun 27, 2014
1 parent 429f20f commit b087830
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 62 deletions.
15 changes: 8 additions & 7 deletions src/message/valdrMessage-directive.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,24 +9,22 @@
var valdrMessageDirectiveDefinition = ['$compile', 'valdrUtil', function ($compile, valdrUtil) {
return {
restrict: 'E',
require: ['?^valdrType', '?^ngModel', '?^form'],
require: ['?^valdrType', '?^ngModel'],
link: function (scope, element, attrs, controllers) {

var valdrTypeController = controllers[0],
ngModelController = controllers[1],
formController = controllers[2],
fieldName = attrs.name;

// Stop right here if this is an <input> that's either not inside of a valdr-type block
// or there is no ng-model bound to it.
if (!valdrTypeController || !ngModelController || !formController) {
if (!valdrTypeController || !ngModelController) {
return;
}

// Add violation message if there is no 'no-valdr-message' attribute on this input field.
if (angular.isUndefined(attrs.noValdrMessage)) {
var formField = formController.$name + '.' + fieldName;
var valdrMessageElement = angular.element('<span valdr-message="' + formField + '"></span>');
var valdrMessageElement = angular.element('<span valdr-message="' + fieldName + '"></span>');
var formGroup = valdrUtil.findWrappingFormGroup(element);
formGroup.append(valdrMessageElement);
$compile(valdrMessageElement)(scope);
Expand All @@ -50,12 +48,13 @@ angular.module('valdr')
replace: true,
restrict: 'A',
scope: {
formField: '=valdrMessage'
formFieldName: '@valdrMessage'
},
templateUrl: function () {
return valdrMessage.templateUrl;
},
link: function (scope) {
require: ['^form'],
link: function (scope, element, attrs, formController) {

var updateTranslations = function () {
if (valdrMessage.translateAvailable && angular.isArray(scope.violations)) {
Expand All @@ -68,6 +67,8 @@ angular.module('valdr')
}
};

scope.formField = formController[0][scope.formFieldName];

scope.$watch('formField.valdrViolations', function (valdrViolations) {
if (valdrViolations && valdrViolations.length) {
scope.violations = valdrViolations;
Expand Down
106 changes: 51 additions & 55 deletions src/message/valdrMessage-directive.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,15 @@ describe('valdrMessage input directive', function () {
'<div valdr-type="TestClass">' +
'<input type="text" name="fieldName" ng-model="myObject.field">' +
'</div>' +
'</form>'
'</form>'
);

// when
var nextElement = element.find('input').next()[0];

//then
expect(nextElement.attributes['valdr-message']).toBeDefined();
expect(nextElement.attributes['valdr-message'].value).toBe('demoForm.fieldName');
expect(nextElement.attributes['valdr-message'].value).toBe('fieldName');
});


Expand All @@ -55,7 +55,7 @@ describe('valdrMessage input directive', function () {

//then
expect(lastInFormGroup.attributes['valdr-message']).toBeDefined();
expect(lastInFormGroup.attributes['valdr-message'].value).toBe('demoForm.fieldName');
expect(lastInFormGroup.attributes['valdr-message'].value).toBe('fieldName');
});

it('should NOT add a the valdr-message after the input if no-valdr-message is set', function () {
Expand All @@ -65,7 +65,7 @@ describe('valdrMessage input directive', function () {
'<div valdr-type="TestClass">' +
'<input type="text" name="fieldName" ng-model="myObject.field" no-valdr-message>' +
'</div>' +
'</form>'
'</form>'
);

// when
Expand All @@ -82,7 +82,7 @@ describe('valdrMessage input directive', function () {
'<div>' +
'<input type="text" name="fieldName" ng-model="myObject.field">' +
'</div>' +
'</form>'
'</form>'
);

// when
Expand All @@ -100,8 +100,20 @@ describe('valdrMessage directive', function () {

beforeEach(module('valdr'));

var compileTemplate = function (template) {
var element = $compile(angular.element(template))($scope);
var compileTemplate = function () {
var html =
'<form name="testForm">' +
'<input type="text" name="testField" ng-model="model">' +
'<span valdr-message="testField"></span>' +
'</form>';
var element = $compile(angular.element(html))($scope);

// manually add some violations for the tests (these are usually added if the field is invalid)
$scope.testForm.testField.valdrViolations = [
{ message: 'message-1' },
{ message: 'message-2' }
];

$scope.$digest();
return element;
};
Expand All @@ -110,49 +122,37 @@ describe('valdrMessage directive', function () {
$compile = _$compile_;
$scope = $rootScope.$new();
valdrMessage = _valdrMessage_;

$scope.testForm = {
testField: {
valdrViolations: [
{ message: 'message-1' },
{ message: 'message-2' }
]
}
};
}));

it('should display the first message in the default template', function () {
// given
var html = '<span valdr-message="testForm.testField"></span>';

// when
var element = compileTemplate(html);
var element = compileTemplate();

// then
expect(element.html()).toBe('message-1');
expect(element.find('div').html()).toBe('message-1');
});

it('should update the messages in the default template', function () {
// given
var element = compileTemplate('<span valdr-message="testForm.testField"></span>');
var element = compileTemplate();

// when
$scope.testForm.testField.valdrViolations[0].message = 'updatedMessage';
$scope.$digest();

// then
expect(element.html()).toBe('updatedMessage');
expect(element.find('div').html()).toBe('updatedMessage');
});

it('should support custom templates', function () {
// given
valdrMessage.setTemplate('<div>Number of violations: {{ violations.length }}</div>');

// when
var element = compileTemplate('<span valdr-message="testForm.testField"></span>');
var element = compileTemplate();

// then
expect(element.html()).toBe('Number of violations: 2');
expect(element.find('div').html()).toBe('Number of violations: 2');
});

});
Expand Down Expand Up @@ -181,8 +181,18 @@ describe('valdrMessage directive with angular-translate', function () {
});
});

var compileTemplate = function (template) {
var element = $compile(angular.element(template))($scope);
var compileTemplate = function () {
var html =
'<form name="testForm">' +
'<input type="text" name="testField" ng-model="model">' +
'<span valdr-message="testField"></span>' +
'</form>';
var element = $compile(angular.element(html))($scope);

$scope.testForm.testField.valdrViolations = [
{ message: 'message-1', field: 'testField', type: 'Person', param: '2' },
{ message: 'message-2', field: 'testField', type: 'Person', param: '3' }
];
$scope.$digest();
return element;
};
Expand All @@ -192,26 +202,17 @@ describe('valdrMessage directive with angular-translate', function () {
$scope = $rootScope.$new();
$translate = _$translate_;
valdrMessage = _valdrMessage_;

$scope.testForm = {
testField: {
valdrViolations: [
{ message: 'message-1', field: 'testField', type: 'Person', param: '2' },
{ message: 'message-2', field: 'testField', type: 'Person', param: '3' }
]
}
};
}));

it('should translate the field name', function () {
// given
valdrMessage.setTemplate('<div>{{ violations[0].fieldName }}</div>');

// when
var element = compileTemplate('<span valdr-message="testForm.testField"></span>');
var element = compileTemplate();

// then
expect(element.html()).toBe('Field Name');
expect(element.find('div').html()).toBe('Field Name');
});

it('should translate the field name to german', function () {
Expand All @@ -220,40 +221,35 @@ describe('valdrMessage directive with angular-translate', function () {
valdrMessage.setTemplate('<div>{{ violations[0].fieldName }}</div>');

// when
var element = compileTemplate('<span valdr-message="testForm.testField"></span>');
var element = compileTemplate();

// then
expect(element.html()).toBe('Feldname');
expect(element.find('div').html()).toBe('Feldname');
});

it('should update field names on language switch at runtime', function () {
// given
valdrMessage.setTemplate('<div>{{ violations[0].fieldName }}</div>');
var element = compileTemplate('<span valdr-message="testForm.testField"></span>');
expect(element.html()).toBe('Field Name');
var element = compileTemplate();
expect(element.find('div').html()).toBe('Field Name');

// when
$translate.use('de');
$scope.$digest();

// then
expect(element.html()).toBe('Feldname');
expect(element.find('div').html()).toBe('Feldname');
});


it('should allow to use parameters in the translated messages', function () {
// given
$scope.testForm = {
testField: {
valdrViolations: [
// note: message-2 has parameters defined in the translation tables
{ message: 'message-2', field: 'testField', type: 'Person', param: '3', secondParam: '4' }
]
}
};

// when
var element = compileTemplate('<span valdr-message="testForm.testField"></span>');
// given / when
var element = compileTemplate();
$scope.testForm.testField.valdrViolations = [
// note: message-2 has parameters defined in the translation tables
{ message: 'message-2', field: 'testField', type: 'Person', param: '3', secondParam: '4' }
];
$scope.$digest();

// then
expect(element.find('span').html()).toBe('field: Field Name param: 3 secondParam: 4');
Expand Down

0 comments on commit b087830

Please sign in to comment.