Tutorial on how to create an Angular JS Directive for expand and collapse with step by step instructions, demo and source code download.
Tutorial on how to create an Angular JS Directive for expand and collapse with step by step instructions, demo and source code download
STEP1: CREATE THE CONTROLLER
Create a JS file demoController.js
STEP 2: SET UP THE CONTROLLER TO SUPPLY DATA
Initialise a scope variable (e.g. $scope.customDataList) with the data.
STEP 3: CREATE THE DIRECTIVE
Create a JS file viewMoreDirective.js
viewMoreDirective.html has the template for the directive.
customdata: '='binds the data object having the content. In the viewMoreDirective.html, the content is accessed through customdata. For instance, customdata.id
STEP 4: CREATE THE TEMPLATE
Create an html file viewMoreDirective.html
STEP 5: UPDATE THE DIRECTIVE TO HANDLE WINDOW RESIZE
The option to expand/ collapsed is displayed only if the content to be displayed exceeds the specified height of the content. Show/ hide of expand/ collapse option is handled in case of resizing the browser; in mobile devices the view is shown accordingly.
STEP 6: UPDATE THE DIRECTIVE TO HANDLE VIEW MORE/ VIEW LESS BUTTON CLICKS
STEP 7: INCLUDE THE DIRECTIVE MARK UP IN THE VIEW
To use the directive, include the directive mark-up in the html page
<view-more customdata="data"></view-more>This directive can also be used inside an ng-repeat.