How to provide attributes to a controller function in AngularJS Directive?

Question

Sorry, I'm still new to AngularJS and I feel so bad for posting 3 questions in 2 weeks already.

What I basically try to achieve are 2 directives for a form like this:

<form name="formTop" class="input-top" style="max-width: 700px;">
<special-input id="inputTop1" name="input1" type="email" label="Email" placeholder="Email" ng-model="input1" ng-minlength="5" ng-maxlength="20"></special-input>
<special-validation for="input1" message="required" type="error">This message box represents an error</special-validation>
<special-validation for="input1" message="minlength" type="warning">This message box represents a warning</special-validation>
<special-validation for="input1" message="email">Invalid email address</special-validation>

<special-input id="inputTop2" name="input2" type="text" label="Required text" placeholder="Required text" ng-model="input2" ng-minlength="5" ng-maxlength="20" required></special-input>
<special-validation for="input2" message="required" type="error">This message box represents an error</special-validation>
<special-validation for="input2" message="minlength" type="warning">This message box represents a warning</special-validation>
<special-validation for="input2" message="maxlength">This message box represents an error</special-validation>

<special-input id="inputTop3" type="password" label="Password" placeholder="Password"></special-input>

The directive special-input provides an outter div, a label and the input. The template looks like this: (the user-provided attributes are added to the input in my compileFunction)

    '<div>'+
    '<label for="' + attrs.id + '" class="control-label">' + attrs.label + '</label>' +
    '<div class="controls">' +
    ' <input ng-keypress="inputDirCtrl.handleKeyPress(attrs)">' +
    '</div>' +
    '</div>'

while special-validation provides error messages below. These are shown as soon as the input that they refer to is invalid. This is their template:

    '<div class="controls" role="alert">' +
    '<div class="alert input-message" ' +
    'ng-show="' + element.parent().attr('id') + '.' + attrs.for + '.$error.' + attrs.message + '">' +
    '</div>' +
    '</div>'

However, I struggle with handling the errors. Requirement: The special-validation error message is displayed as soon as the user stopped typing in the special-input input for 1 second AND the input is invalid.

I have no idea what the best approach for this might be, but this is what I got so far:

    function templateFunction(element, attrs) {
  var template = [
    '<div>'+
    '<label for="' + attrs.id + '" class="control-label">' + attrs.label + '</label>' +
    '<div class="controls">' +
    ' <input ng-keypress="inputDirCtrl.handleKeyPress(attrs)">' +
    '</div>' +
    '</div>'
  ].join('');
  return template;
}

function compileFunction(element, attrs) {
  //...
}

function linkFunction(element, attrs) {
  //...
}

function controllerFunction() {
  var vm = this;
  vm.change = 0;
  //}

  vm.handleKeyPress = function (attrs) {
    // TODO : add Timeout here
    vm.change = vm.change + 1;
    vm.form = attrs.id;
    console.log(vm.form);
    // This does not return the id of the input that I typed in, but instead returns the last input on the page
  }
}
return {
  restrict: 'E',
  replace: true,
  transclude: true,
  template: templateFunction,
  compile: compileFunction,
  link: linkFunction,
  controller: controllerFunction,
  controllerAs: 'inputDirCtrl'
};

}

But the handleKeyPress()-function does not return the id of the input that I typed in. Instead, it returns the last input on the page

So I'm not able to indicate which of the inputs changed.

R. Salisbury · Accepted Answer · 2015-12-09 16:55:11Z

2

Just bind to scope using the directive's attributes:

var directive = {
    restrict: 'E',
    scope: {
         inputId: '=for' //<el for="input1"> implies scope.inputId == "input1"
    },
    controller: function($scope) {
         vm.handleKeyPress = function() {
             vm.form = $scope.inputId;
         }
    }
}

answered Dec 9, 2015 at 16:55

R. Salisbury

2,00519 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to provide attributes to a controller function in AngularJS Directive?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related