jquery - How to handle data binding and dom manipulation for showing/hiding an object in AngularJS -


I have a simple overhead directive that is displayed when a user clicks on a button I would like to do this If the user clicks on the overlay, he hides himself, though, I have an NG-show that forces a variable on the element of the directive, which I do to hide / show the overlay The problem is that if I click on the overlay then Will hide itself, but I can not show the overlay again. Since I am hiding the overlay through a jquery click () handler, the bound variable is not changing wrong. When I try to show it again, the bound variable value is not changing, so it can never be detected again. .

What is the best way to handle this situation?

Instructions:

  app.directive ('overlay', function () {return {restrict: "a", transclude: true, template: '& lt; div Class = "overlay"> 
, link: function (area, element, attribs) {element.click (Function {} {element.hide ();}}}}};});

Used here:

  & lt; Div overlay ng-show = "showOverlay" & gt; & Lt; A href = "javascript: //" class = "dialog-off" ng-click = "hidden overswl ()" & gt; & Lt; I class = "cancellation-outline-circle" & gt; & Lt; / I & gt; & Lt; / A & gt; & Lt; Div class = "help-video-player" & gt; & Lt; Div class = "help-video-layer" & gt; & Lt; Iframe ng-src = "{{getVideoUrl ('parent')}}" width = "800" height = "600" frameborder = "0" webkitoploscline mozillaofloscreen acceptible screen & gt; & Lt; / Iframe & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "help-overlay" & gt; & Lt; A href = "javascript: //" ng-click = "showhold overlay ()" & gt; & Lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

Since the showOverlay variable is defined out of the instructions, it is difficult to manipulate.

To formalize the suggestion of zerophlog, here is a bella with an example.

  & lt; Div ng-app = 'foo' ng-controller = 'ctrl' & gt; & Lt; Div ng-click = 'showOverlay = true' & gt; Show it & lt; / Div & gt; & Lt; Div overlay = 'showOverlay' ng-show = 'showover' & gt; This is showing! & Lt; / Div & gt; & Lt; / Div & gt; ('Ctrl', function ($ scope) {$ scope.showOverlay = false;}) Instructions ('overlay', function () {return {restrict}: "a", passed: true, scope: {overlay: '='}, Template: '& lt; div ng-click = "overlay = false" gt; & lt; div ng-transclude & gt; & lt; / div & gt; & lt; / div & gt; };});  

Comments

Popular posts from this blog

import - Python ImportError: No module named wmi -

Editing Python Class in Shell and SQLAlchemy -

c# - MySQL Parameterized Select Query joining tables issue -