web-dev-qa-db-fra.com

Passer la valeur booléenne à la directive

J'essaie de basculer la visibilité d'un élément rendu par une directive en utilisant <div ngHide="readOnly">. La valeur ou readOnly est transmise via une 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) {};
                }
            }
        };
    }]);

Cela semble fonctionner dans les cas suivants:

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

Cependant, si j'inverse l'expression booléenne <div ngHide="!readOnly"> L’utilisation suivante de la directive ne masque pas la plongée comme prévu:

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

Qu'est-ce que je fais mal?

javascriptangularjsangularjs-directive
43
timmy

ce que vous faites mal est

readOnly:'@'

cela signifie que readOnly sera une chaîne, pour en faire une variable js, essayez

readOnly:'='

puis

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

devrait être

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

vous devez montrer plus de code, cela peut faire partie de l'erreur mais je pense qu'il y a plus

j'espère que ça aide

110
bto.rdz

Actuellement, cela ne fonctionne pas car bto.rdz mentionné dans sa réponse, @ lira la valeur brute de l'attribut, c'est pourquoi vous avez besoin d'interpoler votre valeur booléenne. Dans l'exemple suivant, vous pouvez basculer la valeur de readOnly au niveau de la portée de la directive via un contrôleur contenant le modèle ctrlReadOnly.

Ce que je suggère plutôt est d'utiliser une variable de portée pour la rendre dynamique avec =.

Comment utiliser votre directive 

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

La directive ressemble à ceci

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

Voici un faux contrôleur pour préparer les données pour la vue

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

J'ai fait un violon js ici

10
axelduch

Votre directive est correcte (sauf qu'il ne devrait pas y avoir de point-virgule après post:function(scope, tElement, tAttrs) {}).

Utilisation de la directive:

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

Dans SingleViewCard.html:

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

Notez que le point d'exclamation vient avant les accolades.

Explication 

scope: {
    readOnly:'@'
},

signifie que readOnly devient une variable qui contient une valeur de chaîne spécifiée par le read-only attribut. Nous pouvons ensuite utiliser notre variable readOnly dans le modèle en l’entourant de doubles accolades.

J'ai aussi fait un jsFiddle pour cela ici .

4
Steve Lang

Dans le monde des composants (post 1.5), ceci peut être réalisé en utilisant <pour transmettre le booléen comme une liaison ponctuelle.

Référence des composants angulaires

Les entrées doivent utiliser les liaisons <et @. Le symbole <désigne les liaisons unidirectionnelles disponibles depuis la version 1.5. La différence avec = est que les propriétés liées dans la portée du composant ne sont pas surveillées. En d'autres termes, si vous affectez une nouvelle valeur à la propriété dans la portée du composant, la portée parente ne sera pas mise à jour.

3
John Lee