So I'm trying to show a chunk of HTML as the contents of a modal dialog and
I've constructed a custom directive for this purpose. The directive is
mostly uninteresting but looks like this:
client.directive('modalDialog', function ()
{
return {
restrict: "E",
replace: true,
transclude: true,
templateUrl: "templates/modalDlg.html",
link: function (scope, element, attrs)
{
}
}
})
The key important feature of the directive is that I'm using transclusion.
Now my modalDlg.html template looks like this:
<div>
<div class='modal-background'></div>
<div ng-transclude></div>
</div>
Again, not very interesting.
Where it gets interesting is with my use of the directive via HTML that
looks like this:
<modal-dialog ng-show='showTheDialog'>
*Bunch of HTML appears here.*
</modal-dialog>
Elsewhere, I have an clickable div that looks like this:
<div ng-click='showTheDialog=true'>
This works just fine to show the dialog. When the div is clicked, the
dialog pops up. But, here's the weird part. If I examine the scope while
the dialog is up, showTheDialog has mysteriously been set back to false! So
if I have a button (as I do) that tries to bring down the dialog by setting
showTheDialog to false, it doesn't work, because Angular detects no change
in the value of that scope variable.
But to really seal the deal of weirdness here, if I change the clickable
div to be like this:
<div ng-click='ShowTheDialogPlease()'>
where ShowTheDialogPlease is defined like this:
$scope.ShowTheDialogPlease = function ()
{
$scope.showTheDialog = true
}
Then everything works! As expected, while the dialog is up, showTheDialog
is true and now, when I click on my take-down button, the dialog is
dismissed as it should be.
This really looks a lot to me like an Angular bug. It's hard for me to see
how
<div ng-click='showTheDialog=true'>
should behave so differently from
<div ng-click='ShowTheDialogPlease()'>
Has anybody encountered anything like this? Can you confirm or deny that
this is an Angular bug?
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
