将布尔值传递给指令

Question

我试图切换指令使用的元素的可见性<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}}"/>

我究竟做错了什么？

Answer 1

你做错了什么

readOnly:'@'

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

readOnly:'='

然后

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

应该

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

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

希望能帮助到你

Answer 2

目前它不起作用,因为bto.rdz在他的回答中提到,@将读取属性的原始值,这就是你需要插入你的布尔值的原因.在以下示例中,您可以readOnly通过持有模型的控制器切换指令范围级别的值ctrlReadOnly.

我建议的是使用范围变量使其动态化=.

如何使用你的指令

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

该指令看起来像这样

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;
});

我在这里做了一个小提琴

Answer 3

在（1.5 后）组件世界中，这可以使用“<”将布尔值作为一次性绑定传递来实现。

角度组件参考

输入应使用 < 和 @ 绑定。< 符号表示单向绑定，自 1.5 起可用。与 = 的区别在于，组件作用域中的绑定属性不受监视，这意味着如果您为组件作用域中的属性分配新值，则不会更新父作用域。