AngularJS: Implementing a Reusable Toggle Chevron with MVC Architecture

 

In this blog post, we'll delve into how to implement a reusable toggle chevron feature in AngularJS, which is particularly handy for collapsible panels or dropdowns. This example will follow the Model-View-Controller (MVC) pattern, ensuring our code is both manageable and scalable. We will create a controller that handles the logic, use a directive for our view, and maintain the state in our model.

AngularJS MVC Structure and Implementation

The MVC architecture separates concerns, making our applications easier to manage and extend:

• Model: Manages data and rules. Here, the model will keep track of whether sections are expanded or collapsed.
• View: Displays data (model) and sends user actions (events) to the controller.
• Controller: Updates the model based on user actions captured in the view and updates the view in response to model changes.

Step-by-Step Implementation

1. HTML Structure

We start by defining our HTML structure that will utilize our AngularJS components. We'll pass chevronId through to our AngularJS code, ensuring we can uniquely identify and control our toggle chevron.

<div ng-app="toggleApp" ng-controller="ToggleController">
    <div>
        <a ng-click="toggleChevron()"
           class="btn btn-chevron_icon"
           data-bs-toggle="collapse"
           href="#{{chevronId}}"
           role="button"
           aria-expanded="{{isTableExpanded}}"
           aria-controls="{{chevronId}}"
           ng-class="{'disabled': itemCollection.length == 0, 'btn-chevron_icon--disabled': itemCollection.length == 0}">
            <i ng-class="{'fa fa-chevron-up': isTableExpanded, 'fa fa-chevron-down': !isTableExpanded}"></i>
        </a>
        Address
    </div>
</div>

 

 

2. AngularJS Controller

The controller will handle the logic for toggling the chevron and listening to changes in the collection that might affect the visibility and state of the chevron.

angular.module('toggleApp', [])
.controller('ToggleController', ['$scope', '$attrs', function ($scope, $attrs) {
    $scope.chevronId = $attrs.chevronId;
    $scope.isTableExpanded = true;

    $scope.toggleChevron = function() {
        $scope.isTableExpanded = !$scope.isTableExpanded;
    };

    $scope.$watch('itemCollection.length', function (newLength) {
        $scope.isTableExpanded = newLength > 0;
    });
}]);

 

3. Explanation of the Code

• The ToggleController initializes with a default expanded state (isTableExpanded = true).
• toggleChevron is a function bound to the click event of the chevron link, which toggles the state of isTableExpanded.
• A $watch is set up on itemCollection.length to automatically collapse the chevron if the collection is empty, demonstrating responsive UI updates based on data changes.

By encapsulating the toggle logic in a directive and handling the state through a controller, this AngularJS implementation follows the MVC pattern, ensuring that each aspect of the application is properly isolated but works cohesively. This approach enhances maintainability and scalability, allowing other developers to easily understand and reuse components across the application.