Comment lier des valeurs booléennes dans angulaire directives?

J'aimerais lier/définir certains attributs booléens à une directive. Mais je ne sais vraiment pas comment faire et à atteindre les objectifs suivants comportement.

Imaginer que je veux mettre un drapeau sur une structure, disons qu'une liste d'outils rétractables ou non. J'ai le code HTML suivant:

<list items="list.items" name="My list" collapsable="true"></list>

items sont liées, name est juste un attribut

J'aimerais que collapsable attribut à être disponible dans la liste de dollars du champ d'application, soit par le passage d'une valeur (vrai, faux ou quoi que ce soit), soit une liaison bidirectionnelle

<list items="list.items" name="{{list.name}}" collapsable="list.collapsed"></list>

Je suis le développement de certains composants de l'INTERFACE utilisateur et j'aimerais fournir de multiples façon d'interagir avec eux. Peut-être, dans le temps, certains gars voudrais savoir l'état du composant est effondré ou non, par le passage d'une propriété de l'objet à l'attribut.

Est-il un moyen pour y parvenir? S'il vous plaît corrigez-moi si je missunderstood quelque chose ou je me trompe.

Grâce

définition de l'attribut comme les deux sens lié avec '=' ne fonctionne pas lors du passage direct des valeurs booléennes true ou false parce que je ne peut pas définir le champ d'application de la valeur à un autre. par exemple, $scope.collapsable = false;
vous rétractables attribut de changement de valeur au moment de l'exécution ou de rester le même au moment de la deslaration
si les valeurs ne va pas changer alors utilisez simplement attrs["rétractables"]
comme je l'ai dit, la valeur est susceptible d'évoluer dans le contrôleur

InformationsquelleAutor Chris X | 2013-08-02

26

Vous pouvez configurer vos propres 1-voie de liaison de données de comportement pour les booléens comme ceci:
```
link: function(scope, element, attrs) {

    attrs.$observe('collapsable', function() {

        scope.collapsable = scope.$eval(attrs.collabsable);
    });

}
```
À l'aide de $observer ici signifie que votre "watch" est seulement affecté par l'attribut de changer et ne sera pas affectée si vous modifiez directement le $scope.rétractables à l'intérieur de votre directive.
- Je trouve l'utilisation de $scope/$/élément de$attrs noms ici de la confusion, car le lien ne permet pas d'obtenir des injections, seulement des arguments de position. Si la portée de l'élément, attrs serait plus approprié.
- Quelle est la différence entre scope.$eval() et du javascript natif eval() fonction?
- Voici une question que vous pourriez trouver utiles. stackoverflow.com/questions/15671471/...
InformationsquelleAutor bingles

Créer un champ d'application de la directive qui définit les bi-directionnelle de liaison:

app.controller('ctrl', function($scope)
{
    $scope.list = {
        name: 'Test',
        collapsed: true,
        items: [1, 2, 3]
    };
});

app.directive('list', function()
{
    return {
        restrict: 'E',
        scope: {
            collapsed: '=',
            name: '=',
            items: '='
        },
        template:
            '<div>' +
                '{{name}} collapsed: {{collapsed}}' +
                '<div ng-show="!collapsed">' +
                    '<div ng-repeat="item in items">Item {{item}}</div>' +
                '</div>' +
                '<br><input type="button" ng-click="collapsed = !collapsed" value="Inside Toggle">' +
            '</div>'
    };
});

Puis passer les options en tant qu'attributs:

<list items="list.items" name="list.name" collapsed="list.collapsed"></list>

http://jsfiddle.net/aaGhd/3/

Certainement, cela fonctionne! Mais je tiens tout de même à être en mesure de définir la collapsed attribut avec une valeur booléenne, avec true ou false
Pour ceux qui s'interrogent sur le dessus - collapsed="true"
s'est effondré="true" est de travailler pour cette directive.

InformationsquelleAutor noj

5

Vous ne pouvez pas passer des chaînes true ou false que la valeur de l'attribut, et également en charge la transmission d'une portée de propriété tels que list.collapsed que la valeur de l'attribut pour les deux sens de la liaison. Vous avez à choisir un sens ou dans l'autre.

C'est parce que vous ne pouvez spécifier qu'une façon d'interpréter la valeur de l'attribut dans votre directive lors de l'utilisation d'un isolat portée.

Je suppose que vous pourriez utiliser = dans votre diretive, et également de vérifier dans votre fonction de liaison si attrs.collapsable est fixé à true ou false: si oui, alors vous savez une valeur booléenne était passé, et si non, utilisez les deux sens de la liaison de données. Mais c'est hacky.

InformationsquelleAutor Mark Rajcok
2

Je sais que je suis comme un retard d'un an sur ce projet, mais vous pouvez faire cela en utilisant la fonction de lien (https://docs.angularjs.org/guide/directive). La signature ressemble à ceci:
```
function link(scope, element, attrs) { ... } 
```
Que attrs objet sera rempli avec les valeurs brutes passé. On pourrait dire que si (attrs.s'est effondré = = true) { ... } ou quelque chose du genre.
- Qui ne va pas au travail. Toutes les valeurs à l'intérieur d'un attribut de type string. Donc, si vous définissez s'est effondré="false", puis vérifiez si (attrs.s'est effondrée), il serait vrai, parce que la chaîne "faux" est truthy
- En effet. J'ai mis à jour l'exemple avec un simple "vraie" chaîne de test. Je pense qu'il répond à l'intention de la question.
InformationsquelleAutor Brandon Prudent

Depuis Angulaire 1.3 attrs.$observer semble déclencher aussi pour pas défini les attributs, donc si vous voulez un compte pour un attribut non défini, vous devez faire quelque chose comme:

link: function(scope, element, attrs) {
    attrs.$observe('collapsable', function() {
      scope.collapsable = scope.$eval(attrs.collapsable);
      if (scope.collapsable === undefined) {
        delete scope.collapsable;
      }
    });
  },

InformationsquelleAutor user1338062

Vous devez vous connecter pour publier un commentaire.