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

我制作了一个js小提琴here

Answer 3

你的指令很好（除了post:function(scope, tElement, tAttrs) {}之后不应该有分号）。

指令用法：

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

在SingleViewCard.html中：

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

请注意，感叹号位于大括号之前。

<强>解释

scope: {
    readOnly:'@'
},

表示readOnly成为包含read-only属性指定的字符串值的变量。然后我们可以在模板中使用我们的readOnly变量，用双花括号围绕它。

我还为它制作了一个jsFiddle here。

Answer 4

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

Angular Components Reference

输入应使用＆lt;和@ bindings。＆lt;符号表示从1.5开始可用的单向绑定。与=的区别在于不监视组件范围中的绑定属性，这意味着如果为组件范围中的属性分配新值，则不会更新父范围。

将布尔值传递给指令

4 个答案:

该指令如下所示

这是一个假的控制器，用于为视图准备数据