将布尔值传入指令(Passing Boolean Value Into Directive)

 我正在尝试使用<div ngHide="readOnly">切换指令呈现的元素的可见性。 值或readOnly通过指令传入。 
 
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) {};
                }
            }
        };
    }]);
 
 这似乎在以下情况下工作： 
 
<!-- 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}}"/>
 
 但是，如果我反转布尔表达式<div ngHide="!readOnly">指令的下列用法不会像预期的那样隐藏潜水： 
 
<!-- element is rendered when it should be hidden -->
<div single-view-card read-only="{{false}}"/>
 
 我究竟做错了什么？ 

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?

原文：https://stackoverflow.com/questions/25799363