AngularJS - Use a directive to hide a div upon clicking inside an inner element

Question

AngularJS - Use a directive to hide a div upon clicking inside an inner element

I am attempting to create a function that will hide a specific box when clicking on a link within that same box.

My goal is to utilize a directive in order to easily add additional functionality once the box is hidden, making it adaptable for other views as well.

I initially tried using an isolated scope but it seems I may have implemented it incorrectly.

For reference, here is a JSFiddle link: http://jsfiddle.net/rJvqf/

In my controller, I have:

$scope.hideLoginBox = false;

Within my view, there is a div with ng-hide="hideLoginBox"

<div ng-app="MyApp">
  <div ng-controller="MyController">
    <div class="base" ng-hide="hideLoginBox">
        <p>outer</p>
            <div class="child">
                <a href="" my-test="" hidebox="hideLoginBox" >
                    innner
                </a>
            </div>
    </div>
  </div>
</div>

My intention is to use the myTest directive to hide this div when the link is clicked.

I am currently unsure of how to achieve this and would greatly appreciate any assistance provided!

Thank you for your help!

Warm regards, Eric

javascript angularjs angularjs-directive angularjs-scope

Answer 1

Answer №1

So close! All you needed was a scope.$apply because you were in the middle of a bind event within an element, and I switched it to bind to click instead of mousedown.

Check out this working jsfiddle link.

Updated Code:

  element.on('click', function(event) {
    scope.hideLoginBox = true;
    scope.hidebox = true;
    scope.$apply();
    console.log(scope);   
  });

Answer 2

So close! All you needed was a scope.$apply because you were in the middle of a bind event within an element, and I switched it to bind to click instead of mousedown.

Check out this working jsfiddle link.

Updated Code:

  element.on('click', function(event) {
    scope.hideLoginBox = true;
    scope.hidebox = true;
    scope.$apply();
    console.log(scope);   
  });

AngularJS - Use a directive to hide a div upon clicking inside an inner element

Answer №1

Similar questions

Adjusting the Height of a Div Using a Single Button

What is the best way to continuously execute the 'onclick' function using AJAX inside a specific ID?

Incorporating React into an already existing webpage and accessing URL parameters within a .js file

Defer the rendering of Vue.js pages until the data request is completed

ng-src attribute not updating in ng-repeat directive

Display the year-month-day format as YYYY-MM-DD rather than the full date

There is a SyntaxError due to an unexpected token "o" in the JSON data. It is not a valid JSON format

How can you detect a click event on a hidden DIV without capturing clicks on any elements within the DIV, especially when the DIV is not present in the Document Object Model (DOM)

Updating object values within a while loop using JavaScript

Swapping one div for another, all the while incorporating a limited number of buttons within the webpage

"Is it possible to trigger a JavaScript function within an HTML file from a servlet in Java in order to update the

Troubleshooting Vue: Why is my component not visible when using v-form and v-text-field components in Vuetify?

Attempting to save MongoDB data into a variable for integration with Handlebars.js

What is the best way to transform the request query id = ' [12eetftt76237,jhgasduyas7657] ' into an array of elements or strings like [12eetftt76237,jhgasduyas7657]?

What is the best way to retrieve the total number of nested objects within an object?

Update data in the datatables using values from an array list

Using Jquery Regex to Validate Numeric Range Input on KeyUp Event in an Input Field

"Encountered a TypeError: Cannot read property 'params

Tips for maximizing efficiency and minimizing the use of switch conditions in JavaScript when multiple function calls are needed

Tips for showcasing a full body height background