Tips for implementing ngChange within a personalized directive

Question

Tips for implementing ngChange within a personalized directive

Looking to create a directive for a toggle button, here is the code I want to include in the directive:

<div class="toggle-button" ng-class="{true: toggleTrue === true, false: toggleTrue === false}">
    <button class="true" ng-click="toggleTrue = true">Y</button><button class="false" ng-click="toggleTrue = false">N</button>
</div>

(My focus is on style changes only, hence only the class change)

I am hoping for something like:

<toogle ng-change="SomeFunction()" ng-model="someValue" />

How can I utilize ng-change in my directive? Should I simply parse the attribute or use a scope attribute, or is there a code similar to ngModel that needs to be used in conjunction with ngChange.

javascript angularjs angularjs-directive

Answer 1

Answer №1

After experimenting with different approaches, I finally discovered a code snippet that effectively utilizes both ngModel and ngChange:

return {
    restrict: 'E',
    require: 'ngModel',
    scope: {},
    template: '<div class="toggle-button" ng-class="{true: toggleValue === true, false: toggleValue === false}">'+
        '<button class="true" ng-click="toggle(true)">Y</button>'+
        '<button class="false" ng-click="toggle(false)">N</button>'+
        '</div>',
    link: function(scope, element, attrs, ngModel) {
        ngModel.$viewChangeListeners.push(function() {
            scope.$eval(attrs.ngChange);
        });
        ngModel.$render = function() {
            scope.toggleValue = ngModel.$modelValue;
        };
        scope.toggle = function(toggle) {
            scope.toggleValue = toggle;
            ngModel.$setViewValue(toggle);
        };
    }
};

Interestingly, scope: true did not work as expected (when using $scope.toggle variable as a model, it attempted to interpret the boolean value instead of treating it as a function).

Answer 2

After experimenting with different approaches, I finally discovered a code snippet that effectively utilizes both ngModel and ngChange:

return {
    restrict: 'E',
    require: 'ngModel',
    scope: {},
    template: '<div class="toggle-button" ng-class="{true: toggleValue === true, false: toggleValue === false}">'+
        '<button class="true" ng-click="toggle(true)">Y</button>'+
        '<button class="false" ng-click="toggle(false)">N</button>'+
        '</div>',
    link: function(scope, element, attrs, ngModel) {
        ngModel.$viewChangeListeners.push(function() {
            scope.$eval(attrs.ngChange);
        });
        ngModel.$render = function() {
            scope.toggleValue = ngModel.$modelValue;
        };
        scope.toggle = function(toggle) {
            scope.toggleValue = toggle;
            ngModel.$setViewValue(toggle);
        };
    }
};

Interestingly, scope: true did not work as expected (when using $scope.toggle variable as a model, it attempted to interpret the boolean value instead of treating it as a function).

Answer 3

Answer №2

Consider approaching it this manner:

controller:

$scope.handleFunction = function(){...};
$scope.switchValue = false;

view:

<toggle switch="handleFunction" value="switchValue"/>

directive (for scenarios where switchValue is always either true or false):

app.directive('toggle', function(){
    return{
        restrict: 'E',
        replace: true,
        template: ''+ 
            '<div class="toggle-switch" ng-class="toggleValue">'+
                '<button ng-class="toggleValue" ng-click="switch()">{{toggleValue&&\'On\'||\'Off\'}}</button>'+
            '</div>',
        scope: {
            toggleValue: '=value',
            toggleSwitch: '=switch'
        },
        link: function(scope){
            scope.switch = function(){
                scope.toggleValue = !scope.toggleValue;
                scope.toggleSwitch();
            }
        }
    };
})

Answer 4

Consider approaching it this manner:

controller:

$scope.handleFunction = function(){...};
$scope.switchValue = false;

view:

<toggle switch="handleFunction" value="switchValue"/>

directive (for scenarios where switchValue is always either true or false):

app.directive('toggle', function(){
    return{
        restrict: 'E',
        replace: true,
        template: ''+ 
            '<div class="toggle-switch" ng-class="toggleValue">'+
                '<button ng-class="toggleValue" ng-click="switch()">{{toggleValue&&\'On\'||\'Off\'}}</button>'+
            '</div>',
        scope: {
            toggleValue: '=value',
            toggleSwitch: '=switch'
        },
        link: function(scope){
            scope.switch = function(){
                scope.toggleValue = !scope.toggleValue;
                scope.toggleSwitch();
            }
        }
    };
})

Tips for implementing ngChange within a personalized directive

Answer №1

Answer №2

Similar questions

Leverage the model attribute in a Spring controller to conditionally display elements using

What could be causing the Access-Control-Allow-Origin error to appear when attempting to access a page using ajax?

Displaying currency format in an input field using AngularJS filter

Using Angular JS for Traditional Multi-page Websites

In my JavaScript code for generating a Fibonacci series, I aim to include a comma at the end of each string

Utilizing jQuery and JSON to showcase the contents of an array

"What exactly does {...props} refer to and what is the best way to obtain my function from another

Is it possible to convert a date that has been set using useState into an ISOString format?

Retrieve Content from a Different Web Page Using Ajax

The combination of Angular and Rails deployed on Heroku is causing an issue where curly brackets are being displayed but the data is not being

The webpage is displaying an error stating that "<function> is not defined."

The pagination feature of the material-ui data grid is experiencing issues with double clicks because of its compatibility with the react-grid-layout library for

What could be causing the Quasar drawer to overlap the Quasar toolbar in a Vue application?

An issue with asynchronous execution in Protractor

AngularJS NG-Grid displaying incorrect value for select cell

Implementing Dynamic CSS Styles in AngularJS

What is the reason behind Express exporting a function instead of an object in the initial stages?

Issue opening react modal dialogue box

Enumerating items in a JSON dataset

Having trouble with test coverage in Mocha using Blanket?