Filling in input field attributes using a custom directive

Question

Filling in input field attributes using a custom directive

Here is a JSFiddle link for reference:

The issue I am facing involves a controller wrapping a form with certain logic that cannot be defined within the directive hash as a controller. Specifically, I need to dynamically populate a field from a directive in the following manner:

 App.Directive.SomeAwesomeDirective = ->
     restrict: 'C'

     link: (scope, element, attrs) ->
         someValue = scope.someValue
         field = element.find(".some-class")
         scope.fieldValue = someValue
         field.ngModel = "scope.fieldValue"
         field.ngClass = "scope.someAwesomeClass"

         monitorFields = (newValue, oldValue) ->
              console.log "we are here"
              console.debug newValue
              console.debug oldValue
              scope.addValue(newValue)

         scope.$watch "scope.fieldValue", monitorFields, true

The requirements for this task include:

1) Updating scope.fieldValue when the textfield's value is changed. 2) Triggering the addValue method (defined on the wrapping controller) to validate the new value once it has been updated. 3) The addValue method should set the someAwesomeClass scope variable and update the input field's class accordingly. 4) Applying ng-valid/ng-invalid classes for proper form validation based on the aforementioned conditions.

The current jsfiddle demonstration does not exhibit the desired behavior, and I am seeking assistance in resolving this issue...

Thank you!

javascript coffeescript angularjs

Answer 1

Answer №1

If you encounter an issue, it can be resolved by creating a directive called someClass. This directive will trigger the function on its parent element. Additionally, add the execute attribute to the form tag with the desired function for execution. The someClass directive will locate the controller of the dir directive (hence require: '^dir') and execute it accordingly.

Alternatively, you could skip using the dir directive and instead incorporate the execute attribute directly into the someClass directive (e.g. when each input field needs to activate a different function).

<form class="dir" execute="someFunction">

Custom Directives:

app.directive('dir', function () {
  return {
    restrict: 'C',
    scope: {
      execute: '='
    },
    controller: function ($scope) {
      this.execute = $scope.execute;
    }
  };
});


app.directive('someClass', function () {
  return {
    restrict: 'C',
    require: '^dir',
    replace: true,
    template: '<INPUT name="foo" id="bar" type="text" ng-model="fieldValue" >',
    scope: {
      fieldValue: '@'
    },
    link: function (scope, elm, attrs, ctrl) {
      var monitorField = function (newValue, oldValue) {
        if (newValue) {
           ctrl.execute(newValue);
        }
      };
      scope.$watch("fieldValue", monitorField, true);
    }
  };
});

Check out the example on jsFiddle.

Answer 2

If you encounter an issue, it can be resolved by creating a directive called someClass. This directive will trigger the function on its parent element. Additionally, add the execute attribute to the form tag with the desired function for execution. The someClass directive will locate the controller of the dir directive (hence require: '^dir') and execute it accordingly.

Alternatively, you could skip using the dir directive and instead incorporate the execute attribute directly into the someClass directive (e.g. when each input field needs to activate a different function).

<form class="dir" execute="someFunction">

Custom Directives:

app.directive('dir', function () {
  return {
    restrict: 'C',
    scope: {
      execute: '='
    },
    controller: function ($scope) {
      this.execute = $scope.execute;
    }
  };
});


app.directive('someClass', function () {
  return {
    restrict: 'C',
    require: '^dir',
    replace: true,
    template: '<INPUT name="foo" id="bar" type="text" ng-model="fieldValue" >',
    scope: {
      fieldValue: '@'
    },
    link: function (scope, elm, attrs, ctrl) {
      var monitorField = function (newValue, oldValue) {
        if (newValue) {
           ctrl.execute(newValue);
        }
      };
      scope.$watch("fieldValue", monitorField, true);
    }
  };
});

Check out the example on jsFiddle.

Filling in input field attributes using a custom directive

Answer №1

Similar questions

What could be the issue with injecting form information into a MySQL database with Node.js?

Utilizing Selenium Webdriver to efficiently scroll through a webpage with AJAX-loaded content

Issue with Vue 2: Promise does not resolve after redirecting to another page

The calculation of Value Added Tax does not involve the use of jQuery

What is the process for a browser to load JavaScript resources?

implementing conditional logic in angularjs expressions

Tips for integrating both client-side and server-side validation techniques in your web application

Disabling JavaScript with InternetExplorerDriver in Selenium

The Highcharts backgroundColor feature does not apply to more than one chart at a time

Finding the Closest Element with jQuery's .closest() Method

The function does not modify the content of an element in Internet Explorer versions 10 to 11

Is it possible to collaborate using Ionic 2 and AngularJs 1?

Steps for adding a thought bubble over an image using CSS

Converting milliseconds into a formatted DateTime using AngularJS: A step-by-step guide

Achieving the Low Poly Aesthetic with Three.js

Every time I invoke a module, non-global variables are utilized

My div does not refresh when using .load

Trigger the errorPlacement function of the jQuery Validation Plugin on events like onfocusout, keyup, and click

Ways to send a variable to ngIf

Ensuring my Mongo connection string is accurate for hosting a remote database with authorization