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

Tips for eliminating objects with a sessionID:null value from the nested array within an array of objects using JavaScript

Automatically adjust multiple images on an HTML webpage

Is there a way to efficiently use AJAX and PHP to iterate through JSON data and save it to a new JSON file

Are you utilizing Google Chrome extensions for importing and exporting JSON files?

What is the best way to pass my request data to my $scope variable?

Dynamic Website (Link Relationships / Responsive Design / Content Rendering with CSS and HTML)

What is the best way to execute NPM commands within the terminal of Visual Studio Code?

Setting up multiple versions of npm application

Activating the Mobile Menu Function when the Window is Resized

I encountered an error message while running the Angular JS code that I had written, and I am unable to find a solution to resolve it

Error occurred in next.js environment file when referencing process.env keys as strings in .env.local file

Is there a comparison you can make between v-for and a similar feature in Stencil? (such as a functionality akin to v-for

"Can you explain the functioning of this Node.js middleware when it doesn't require any

Unable to execute xmlHttp.responseXML on a server that is offline

difficulty encountered during json parsing

Tips on initiating a $http.get request every second using a service

What is the best way to transform a database object into a complex JSON structure?

The absence of AudioPlayer may be responsible for the compilation failure on Vercel

What is the best practice for incorporating CSS and JavaScript files into a PHP template?

The functionality of remotely accessing autocomplete in Angucomplete Alt is currently not functioning properly