Create your own AngularJS directive for displaying or hiding elements using ng-show/ng

Question

Create your own AngularJS directive for displaying or hiding elements using ng-show/ng

Caution: Angular rookie in action.

I'm attempting to craft a personalized widget that initially displays a "Reply" link, and upon clicking it, should hide the link and reveal a textarea. Here's my current progress, but unfortunately, it's not functioning as expected:

  .directive('replybox', function ($rootScope) {
    var linkFn = function (scope, element, attrs) {
        var label = angular.element(element.children()[0]);
        scope.showInput = false;

        label.bind("click", showTextbox);

        function showTextbox() {
            scope.showInput = true;
        }
    };
    return {
        link:linkFn,
        restrict:'E',
        scope:{
            id:'@',
            label:'@',
            showInput:'='
        },
        template:'<a ng-hide="showInput">label</a><textarea ng-show="showInput">    </textarea>',
        transclude:true
    };
})

Any advice or guidance would be greatly appreciated. Thank you!

javascript angularjs

Answer 1

Answer №1

Matias, I have created a working jsFiddle for you to check out: http://jsfiddle.net/pkozlowski_opensource/Z6RzD/

There were several issues at play here, but the most crucial one was the necessity of using Scope.$apply in order for Angular to recognize changes happening outside of its usual scope. By default, Angular does not automatically reevaluate templates with every DOM event, so it needs to be wrapped in an apply function:

scope.$apply('showInput = true');

For more information, refer to this link: http://docs.angularjs.org/api/ng.$rootScope.Scope

Additionally, there are other aspects of your example that warrant attention:

If you intend to pass 'label' as an attribute to your directive and use it in your template, remember to use the expression {{label}}
The purpose of the 'id' attribute was unclear, so I left it out of my fiddle
Similarly, without clear understanding of the intent behind 'showInput', I could not include it in my solution

Answer 2

Matias, I have created a working jsFiddle for you to check out: http://jsfiddle.net/pkozlowski_opensource/Z6RzD/

There were several issues at play here, but the most crucial one was the necessity of using Scope.$apply in order for Angular to recognize changes happening outside of its usual scope. By default, Angular does not automatically reevaluate templates with every DOM event, so it needs to be wrapped in an apply function:

scope.$apply('showInput = true');

For more information, refer to this link: http://docs.angularjs.org/api/ng.$rootScope.Scope

Additionally, there are other aspects of your example that warrant attention:

If you intend to pass 'label' as an attribute to your directive and use it in your template, remember to use the expression {{label}}
The purpose of the 'id' attribute was unclear, so I left it out of my fiddle
Similarly, without clear understanding of the intent behind 'showInput', I could not include it in my solution

Answer 3

Answer №2

Using $timeout in Angular can also be beneficial for notifying the framework of any changes, like so:

.directive('replybox', function($rootScope, $timeout) {
  var linkFunction = function(scope, element, attrs) {
    var labelElem = angular.element(element.children()[0]);
    scope.showInputBox = false;

    labelElem.bind("click", toggleInput);

   function toggleInput() {
     $timeout(function() {
       scope.showInputBox = true;
     });

   }
 };
 return {
  link: linkFunction,
  restrict: 'E',
  scope: {
    id: '@',
    label: '@',
    showInputBox: '='
  },
  template: '<a ng-hide="showInputBox">label</a><textarea ng-show="showInputBox">    </textarea>',
  transclude: true
 };
});

Answer 4

Using $timeout in Angular can also be beneficial for notifying the framework of any changes, like so:

.directive('replybox', function($rootScope, $timeout) {
  var linkFunction = function(scope, element, attrs) {
    var labelElem = angular.element(element.children()[0]);
    scope.showInputBox = false;

    labelElem.bind("click", toggleInput);

   function toggleInput() {
     $timeout(function() {
       scope.showInputBox = true;
     });

   }
 };
 return {
  link: linkFunction,
  restrict: 'E',
  scope: {
    id: '@',
    label: '@',
    showInputBox: '='
  },
  template: '<a ng-hide="showInputBox">label</a><textarea ng-show="showInputBox">    </textarea>',
  transclude: true
 };
});

Create your own AngularJS directive for displaying or hiding elements using ng-show/ng

Answer №1

Answer №2

Similar questions

Generating a JavaScript object from a string to optimize its compatibility with datatables

onsubmit function was never triggered

Retrieve the image and insert it using an img tag

Using Angular to pass an attribute into a directive and utilizing it as a property name on an object

Retrieving the previous value using JQuery's onChange event

Check if an object is already in an array before pushing it in: JavaScript

Retrieve the route parameters and exhibit the default option in a dropdown menu using Angular 2/4/5, along with translations implemented through ngx-translate

Ways to remain on the same page even after submitting a form

Is it possible to resize AngularJS components to fit their parent elements

Troubleshooting a jQuery Selector Issue with a Dynamic Form

D3 Treemap for handling extensive sets of data

Troubleshooting MongoDB and Node.js: Issue with updating variables when inserting documents in a loop

Exporting JSON data as an Excel file in AngularJS, including the option to customize the fonts used for the

An error occurred with the datepicker: Unable to connect to 'bsValue' as it is not recognized as a property of 'input'

Display the size of the data array in VueJS once the data has been retrieved from the API

Position the typography component to the right side

Switching classes in real time with JavaScript

Issue arises when trying to utilize Ajax on the Fancy Box overlay button click and the functionality does not perform as

Guide to highlighting manually selected months in the monthpicker by utilizing the DoCheck function in Angular

I'm encountering an issue with numbers that contain comma decimal separators