timmy timmy - 4 years ago 129
AngularJS Question

Passing Boolean Value Into Directive

I am trying to toggle the visibility of an element rendered by a directive using

<div ngHide="readOnly">
. The value or
is passed in via a directive.

.directive('singleViewCard', [function() {
return {
templateUrl: '/CrossReference-portlet/js/templates/SingleViewCard.html',
scope: {

link: {
pre:function(scope, tElement, tAttrs) {},
post:function(scope, tElement, tAttrs) {};

This seems to work in the following cases:

<!-- element rendered in single-view-card is hidden -->
<div single-view-card read-only="{{true}}"/>

<!-- element rendered in single-view-card is shown -->
<div single-view-card read-only="{{false}}"/>

However, if I invert the boolean expression
<div ngHide="!readOnly">
The following usage of the directive does not hide the dive as expected:

<!-- element is rendered when it should be hidden -->
<div single-view-card read-only="{{false}}"/>

What am I doing wrong?

Answer Source

what you are doing wrong is


this means readOnly will be a string, to make it a js variable try



<div single-view-card read-only="{{false}}"/>

should be

<div single-view-card read-only="true"/>

you need to show more code, this can be part of the error but I think there is more

hope it helps

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download