CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scope
Eric
Eric

Reputation: 567

AngularJS - hide a div when clicking in an inner element using a directive

I'm trying to hide a box when clicking on a link inside this box.

I wan't to use a directive to be able to add more code when once the box is hiden and to keep it generic so I can use that with other views.

I've tried to use isolated scope but I guess I did it the wrong way.

Here is a fiddle link : http://jsfiddle.net/rJvqf/

I have a in my controller :

$scope.hideLoginBox = false;

In my view I have 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>

When I click on the link I want to hide this div using the directive myTest.

I can't figure out how to do this.

Thanks for your help!

Regards, Eric

Upvotes: 0

Views: 622

Answers (1)

Davin Tryon
Davin Tryon

Reputation: 67296

Nearly there. You just needed a scope.$apply because you were in an element's bind event and I changed it to bind to click instead of mousedown.

Here is a working jsfiddle.

Changes:

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

Upvotes: 1

Related Questions