Issue
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?
Solution
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
Answered By - bto.rdz
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.