AngularJs Transmettant des données complexes de la directive

J'ai la directive suivante:

<div teamspeak details="{{data.details}}"></div>

c'est la structure de l'objet:

data: {
                details: {
                    serverName: { type: 'text', value: 'my server name' },
                    port: { type: 'number', value: 'my port' },
                    nickname: { type: 'text' },
                    password: { type: 'password' },
                    channel: { type: 'text' },
                    channelPassword: { type: 'password' },
                    autoBookmarkAdd: { type: 'checkbox' }
                }
}

et je veux générer un lien sur la base des données à l'intérieur de la data.details objet.
Malheureusement, il ne marche pas puisque de toute façon je cann pas accès à toutes les valeurs intérieures de la details objet, mais si je suis de passage-il d'une simple structure de données comme:

<div teamspeak details="{{data.details.serverName.value}}"></div>

Je peux y accéder par le biais {{details}}.

Voici mon Code de la Directive:

App.directive('teamspeak', function () {
    return {
        restrict: 'A',
        template: "<a href='ts3server://{{details.serverName.value}}:{{details.port.value}}'>Teamspeak Server</a>",
        scope: {
            details: '@details',
        },
        link: function (scope, element, attrs) {
        }
    };
});

Grâce

InformationsquelleAutor Aviran Cohen | 2013-09-22

angularjs

101

Lire sur Angularjs site officiel explication :

@ ou @attr - lier une portée locale de la propriété à la valeur de DOM
attribut. Le résultat est toujours une chaîne de caractères depuis des attributs DOM sont
les chaînes de caractères. Si aucun attribut nom est spécifié, le nom de l'attribut
supposé être le même que le nom local. Donné et widget définition du champ d'application: { localName:'@myAttr' },
puis widget champ d'application de la propriété localName reflètent l'interpolation
la valeur de bonjour {{nom}}. Comme le nom de l'attribut changements de la
localName de propriété sur le widget de la portée. Le nom est lu à partir de la
parent (pas de composant).

De sorte que vous ne pouvez envoyer qu'une chaîne de caractères, à passer un objet, vous avez besoin pour mettre en place un bi-directionnelle liaison à l'aide de =.
```
   scope: {
        details: '=',
    },
```
Et votre HTML se ressemble
```
<div teamspeak details="data.details"></div>
```
- Comment peut-il être fait sans les isoler de la portée???
- Cela ne semble pas fonctionner avec la Machine. Ce que j'ai fait était de créer une interface qui définit le champ d'application. Dans cette interface, j'ai un objet personnalisé. Lors de l'affectation de l'interface pour la portée, je ne peux pas faire object = '=', parce que vous ne pouvez pas affecter une chaîne à un objet de type ObjectType. Des suggestions sur la façon de le faire avec la Machine?
- il peut également être fait en utilisant des liaisons: {} je vais poster une réponse une fois que je l'obtenir pour fonctionner 🙂
InformationsquelleAutor L105
38

Quelqu'un a demandé sur la façon de le faire sans les isoler de la portée, voici une solution:

<div teamspeak details="{{data.details}}"></div>
```
App.directive('teamspeak', function () {
    return {
        restrict: 'A',
        template: "<a href='ts3server://{{details.serverName.value}}:{{details.port.value}}'>Teamspeak Server</a>",
        link: function (scope, element, attrs) {
            if(attrs.details){
                scope.details = scope.$eval(attrs.details);
            }
        }
    };
});
```
On peut même utiliser $interpolate si toutes les valeurs de attrs.details devrait être de définir de façon dynamique angulaire {{...}} les expressions...

scope.details = scope.$eval($interpolate(attrs.details)(scope));

(n'oubliez pas d'injecter $interpolate service dans votre directive)

Remarque importante: je n'ai pas testé cette méthode angulaire 2.
- Si vous utilisez attrs, vous va être dur d'avoir le temps de la conversion de cette directive angulaire 2. C'est juste un personnel de l'indice.
- merci @sh977218, j'ai ajouté une note que cette méthode n'est pas testé angulaire 2
InformationsquelleAutor plong0

Vous devez vous connecter pour publier un commentaire.