Передача логического значения в директиву

Я пытаюсь переключить видимость элемента, созданного директивой, используя <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}}"/>

Что я делаю неправильно?

Ответ 1

что вы делаете неправильно,

readOnly:'@'

это означает, что readOnly будет строкой, чтобы сделать ее переменной js try

readOnly:'='

то

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

должен быть

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

вам нужно показать больше кода, это может быть частью ошибки, но я думаю, что есть больше

надеюсь, что это поможет

Ответ 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 скрипку здесь

Ответ 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 для здесь.

Ответ 4

В мире компонентов (столбца 1.5) это может быть достигнуто с использованием '<' чтобы передать логическое значение как одноразовое привязку.

Angular Ссылка на компоненты

Входы должны использовать < и @привязки. < символ обозначает односторонние привязки, доступные с 1.5. Разница в = заключается в том, что связанные свойства в области компонента не просматриваются, а это означает, что если вы назначаете новое значение для свойства в области компонента, оно не будет обновлять родительскую область.