Strategies for effectively transferring information from a directive template to a controller

Question

Strategies for effectively transferring information from a directive template to a controller

I'm currently working on developing a date-picker that consists of two separate date pickers - one for the start date and another for the end date. Each datepicker element generates a template with two input tags. I want to be able to pass data from the input's value attribute to the controller. I initially tried defining fields within the inner scope using 2-way data binding (dateOne and dateTwo), but it seems to have no effect as there is no real data being passed between the two fields. My alternative approach involves using ng-model, however, my experience with this feature is limited and I am not familiar with the rules associated with it. Below is my code:

angular.module('directives', [])
    .directive('datepicker', ['$timeout',function ($timeout) {
        // Runs during compile
        return {
            scope: {
                id: '@',
                "class": '@',
                dateOne: '=',
                dateTwo: '='
            },
                restrict: 'E', // E = Element, A = Attribute, C = Class, M = Comment
                template: '<div id="{{id}}" class="{{class}}">'+
                        '<div class="date-wrapper">'+
                            '<label for="datepicker-start">From:</label>'+
                            '<div class="fieldWrapper">'+
                                '<input id="datepicker-start" type="date" placeholder="Select date" value={{dateOne}} />'+
                                '<a class="calendar"></a>'+
                            '</div>'+
                        '</div>'+
                        '<div class="date-wrapper">' +
                            '<label for="datepicker-end">To:</label>' +
                            '<div class="fieldWrapper">' +
                                '<input id="datepicker-end" type="date" placeholder="Select date" value={{dateTwo}}/>' +
                                '<a class="calendar"></a>' +
                            '</div>' +
                        '</div>'+
                        '</div>'
                        ,
                replace: true,
            link: function($scope, iElm, iAttrs, controller) {
                console.log('directive link function');
                console.log('directive iAttrs', iAttrs);
                $(".date-wrapper").each(function (index) {
                    console.log('directive index', index);
                    $input = $(this).find('input');
                    $btn = $(this).find('.calendar');

                    console.log('input', $input[0]);
                    console.log('btn', $btn[0]);

                    $input.attr('type', 'text');
                    var pickerStart = new Pikaday({
                        field: $input[0],
                        trigger: $btn[0],
                        container: $(this)[0],
                        format: 'DD/MM/YYYY',
                        firstDay: 1
                    });
                    $btn.show();
                });

            }
        };
}]);

------------------------Updated Code -----------------------------------

angular.module('directives', [])
    .directive('datepicker', ['$timeout',function ($timeout) {
        // Runs during compile
        return {
            scope: {
                id: '@',
                "class": '@',
                dateOne: '=',
                dateTwo: '='
            },
                restrict: 'E', // E = Element, A = Attribute, C = Class, M = Comment
                template: '<div id="{{id}}" class="{{class}}">'+
                        '<div class="date-wrapper">'+
                            '<label for="datepicker-start">From:</label>'+
                            '<div class="fieldWrapper">'+
                                '<input id="datepicker-start" type="date"  placeholder="Select date" ng-model=dateOne />' +
                                '<a class="calendar"></a>'+
                            '</div>'+
                        '</div>'+
                        '<div class="date-wrapper">' +
                            '<label for="datepicker-end">To:</label>' +
                            '<div class="fieldWrapper">' +
                                '<input id="datepicker-end" type="date" placeholder="Select date" ng-model=dateTwo />' +
                                '<a class="calendar"></a>' +
                            '</div>' +
                        '</div>'+
                        '</div>'
                        ,
                replace: true,
            link: function($scope, iElm, iAttrs, controller) {
                console.log('directive iAttrs', iAttrs);
                $(".date-wrapper").each(function (index) {
                    console.log('directive index', index);
                    $input = $(this).find('input');
                    $btn = $(this).find('.calendar');

                    console.log('input', $input[0]);
                    console.log('btn', $btn[0]);

                    $input.attr('type', 'text');
                    var pickerStart = new Pikaday({
                        field: $input[0],
                        trigger: $btn[0],
                        container: $(this)[0],
                        format: 'DD/MM/YYYY',
                        firstDay: 1
                    });
                    $btn.show();
                });

                $scope.$watch(iAttrs.dateOne, function (newValue, oldValue) {
                    console.log('newValue', newValue);
                    console.log('oldValue', oldValue);
                }, true);

            }
        };

javascript angularjs angularjs-directive

Answer 1

Answer №1

Almost there! I've tackled a similar issue before, and here's how I approached solving it (I utilized the UI-Bootstrap Date picker in my scenario).

To send data from your directive to your controller, consider using callbacks instead of simple watches. Using = would require setting up watches in both the controller and directive, leading to unnecessary code and not ideal practice.

Here's what you need to do:

In your directive definition object, bind a callback method/function using the & sign like this:
```
scope: {
    onSelect: "&" // onSelect is our callback function in the controller
}
```
Next, assign the callback attribute a function tied to the controller's $scope, passing it a function reference (not a function call as seen in ng-change), for instance:
```
<my-directive on-selected="onSelected"></my-directive>
```

Define what the onSelected function should do; let's say we want to print the selected date:

// inside the controller
$scope.onSelected = function(time) {
    console.log("Time selected: ", time);
}

Remember to pass the time argument from the directive to the controller as demonstrated in scope.onSelect(), which functions like a curried function. This means it will return a function once called. To test it, use angular.isFunction and call the curried function while providing the argument, such as scope.onSelect()(time).

scope.selectDate = function(time) {
    if (angular.isFunction(scope.onSelect())) {
        // Use isFunction to verify that the callback function points to a valid function object
        scope.onSelect()(time); // Pass the new selected date and time
      }
  }

You can check out a working example in this Plunk demo link.

Answer 2

Almost there! I've tackled a similar issue before, and here's how I approached solving it (I utilized the UI-Bootstrap Date picker in my scenario).

To send data from your directive to your controller, consider using callbacks instead of simple watches. Using = would require setting up watches in both the controller and directive, leading to unnecessary code and not ideal practice.

Here's what you need to do:

In your directive definition object, bind a callback method/function using the & sign like this:
```
scope: {
    onSelect: "&" // onSelect is our callback function in the controller
}
```
Next, assign the callback attribute a function tied to the controller's $scope, passing it a function reference (not a function call as seen in ng-change), for instance:
```
<my-directive on-selected="onSelected"></my-directive>
```

Define what the onSelected function should do; let's say we want to print the selected date:

// inside the controller
$scope.onSelected = function(time) {
    console.log("Time selected: ", time);
}

Remember to pass the time argument from the directive to the controller as demonstrated in scope.onSelect(), which functions like a curried function. This means it will return a function once called. To test it, use angular.isFunction and call the curried function while providing the argument, such as scope.onSelect()(time).

scope.selectDate = function(time) {
    if (angular.isFunction(scope.onSelect())) {
        // Use isFunction to verify that the callback function points to a valid function object
        scope.onSelect()(time); // Pass the new selected date and time
      }
  }

You can check out a working example in this Plunk demo link.

Answer 3

Answer №2

Update the ng-model to dateOne and dateTwo in the template.
Consider creating a separate controller for this directive instead of handling logic within the link function.

app.directive('someDirective', function () { return { restrict: 'A', controller: 'SomeController', controllerAs: 'ctrl', template: '{{ctrl.foo}}' }; });

For further information, visit

Answer 4

Update the ng-model to dateOne and dateTwo in the template.
Consider creating a separate controller for this directive instead of handling logic within the link function.

app.directive('someDirective', function () { return { restrict: 'A', controller: 'SomeController', controllerAs: 'ctrl', template: '{{ctrl.foo}}' }; });

For further information, visit

Strategies for effectively transferring information from a directive template to a controller

Answer №1

Answer №2

Similar questions

"Encountered a 400 Error while trying to access the OpenAI

Removing data with sweetalert in a Ruby on Rails application

How to dynamically insert a new row below a specific row with a sliding animation in jQuery

Node text: three.js and ngraph.tree working together

Once you have reviewed the initial reply, proceed to send a follow-up message

Continuously providing service within the application

updating the model value in AngularJS2 when the input value is modified

When attempting to call a recursive method in Vue with a changing `this` object, an error is thrown: "RangeError: Maximum call stack size exceeded"

The Arrow notations don't seem to be functioning properly in Internet Explorer

The backbone module is experiencing formatting issues

Comparing the benefits of using ajax to switch pages versus the traditional method of loading pages

Converting an array of date strings to a single string in JavaScript

I am attempting to incorporate a List View within a Scroll View, but they are simply not cooperating. My goal is to display a collection of items with additional text placed at the bottom

The issue here is that "onreadystatechange" in JS Ajax is not defined, even

Guide to utilizing jQuery for setting values in all subsequent rows of a table

How to retrieve the ID of a parent sibling using jQuery DataTables

Is there a way to invoke a high-order function multiple times within the code?

IE11 displays a white screen when in fullscreen mode

Issue with form validation, code malfunctioning

Adjusting the transparency level of the map outside a circular zone in the Google Maps JavaScript API v