CODEWITHSUNDEEP
javascripthtmlangularjspopup
ogdabou
ogdabou

Reputation: 592

AngularJS : Hide popup from child controller (popup content)

I have a problem with my directives. If I call the line $scope.popup.show = false from the popup controller, it works fine. If I call $scope.hideModal() from the child contentDirective the code is called (checked in debug) but the $scope.popup.show value doesn't change (in debug the value is "false") and the popup does'nt hide :/.

Have you got any idea ? :)

index.html:

<popup title="sometitle">
  <contentDirective> </contentDirective>
</popup>

popup.html :

<div ng-show="popup.show">
    <div ng-transclude></div>
</div>

popup.js

.directive(....
    return {....
        scope: {}
    }
})
.controller(....
    $scope.hideModal = function()
    {
        $scope.popup.show = false;
    }
}]);

contentDirective.htlm (NOT isolated scope)

<div>
    <button onclick="changeSomethingAndHide()"/>
</div>

contentDirective.js

.controller(....
    $scope.changeSomethingAndHide = function()
    {
        //calls the parent function
        $scope.hideModal();
    }
}]);

Maybe I missed something..

Thank you !

Upvotes: 0

Views: 978

Answers (1)

rchawdry
rchawdry

Reputation: 1266

When you're dealing with transcluded content, scope gets a little bit tricky.

Transcluded scope is not inherited by default (you can change this), it's a "sibling" scope to the enclosing directive, which is somewhat confusing but there are good reasons for this.

So, your contentDirective really can't see anything in your popup directive by default. When you set the $scope.popup.show = false in the hideModal() function, all it's doing is setting a new variable the contentDirective's scope as opposed to setting the one in the popup's scope.

Two options to address this:

  1. You can manually transclude contentDirective and have it use the same scope as your popup directive. See http://angular-tips.com/blog/2014/03/transclusion-and-scopes/ for more details.

  2. You can declare contentDirective with the require keyword indicating you want access to the popup directive's controller. This will be passed into your link function, which you can use to call methods on your popup directive's controller. See https://egghead.io/lessons/angularjs-directive-to-directive-communication for more details.

Upvotes: 1

Related Questions