Javascript 将布尔值传递到指令

我正在尝试使用

切换由指令呈现的元素的可见性。值或

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}}"/>

但是，如果我反转布尔表达式

，则指令的以下用法不会像预期的那样隐藏俯冲：

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

---

我做错了什么？

你做错了什么

readOnly:'@'

这意味着readOnly将是一个字符串，使其成为js变量

readOnly:'='

然后

应该是

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

您需要显示更多代码，这可能是错误的一部分，但我认为还有更多错误

---

希望它有帮助

目前它不起作用，因为正如他的回答中提到的，

@

将读取属性的原始值，这就是为什么需要插入布尔值的原因。 在以下示例中，您可以通过持有模型

ctrlReadOnly

的控制器，在指令的作用域级别切换

readOnly

的值

我建议改为使用范围变量，使其与

=

一起动态

如何使用您的指令

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

---

我做了一个js fiddle

您的指令很好（除了

post:function（scope、tElement、tAttrs）{}

后面不应该有分号）

指令用法：

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

表示

readOnly

成为一个变量，该变量保存由

read-only

属性指定的字符串值。然后，我们可以在模板中使用

readOnly

变量，方法是用双大括号将其括起来

---

我还为它制作了一个JSFIDLE。

在（Post1.5）组件世界中，这可以通过“谢谢”来实现。因此，如果@意味着我的只读属性变成了字符串，那么ngHide表达式将如何计算？@timmy我不知道为什么它在你的情况下有效，这就是我要求更多的原因code@timmy这是一个黄金问题

readOnly

是字符串类型的变量，只有在被双大括号包围时，才应在模板中对其求值，例如

ngHide=“{{readOnly}}”

。。。但是，当模板为

ngHide=“readOnly”

时，为什么仍在对其进行评估？我觉得很奇怪。@bto.rdz我创建了下面的小提琴来说明这个问题。请注意，当用户键入true时，将隐藏。如果用户键入false，则显示该选项
请注意，如果反转逻辑，使模板中的div在ng hide=“！readOnly”上运行，则在输入字段中键入false不会隐藏该值。奇怪。但若您试图更改指令中readOnly的值，它会抛出不可赋值表达式错误。还值得注意的是@and=实际上并不相同，不应互换使用，因此此解决方案对于配置指令的设置更为正确。

angular.module('CrossReference', [])
    .directive('singleViewCard', [function () {
    return {
        restrict: 'A',
        template: '<div ng-hide="readOnly">Hidden when readOnly is true</div>',
        replace: true,
        scope: {
            readOnly: '='
        }
    };
}])

.controller('myCtrl', function ($scope) {
    $scope.ctrlReadOnly = false;
});

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

<div ng-hide="!{{readOnly}}">Lorem ipsum</div>

scope: {
    readOnly:'@'
},