Passing Boolean Value Into Directive

Question

I am trying to toggle the visibility of an element rendered by a directive using <div ngHide="readOnly">. The value or readOnly is passed in via a directive.

angular.module('CrossReference')     .directive('singleViewCard', [function() {         return {             restrict:'AE',             templateUrl: '/CrossReference-portlet/js/templates/SingleViewCard.html',             replace:true,             scope: {                 readOnly:'@'              },             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 1

what you are doing wrong is

readOnly:'@' 

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

readOnly:'=' 

then

<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