Question

<cat color="black"></cat> 

app.directive('cat', function() { 
    return { 
     restrict: 'E', 
     scope: { 
     color: '=' 
     }, 
     link: function(scope) { 
     alert(scope.color) 
     } 
    } 
}); 

Il alertera un message indéfini.

Je sais que c'est faisable si une utilisation $ watch, mais je ne veux pas, parce que les paramètres peuvent avoir des dépendances entre eux. Ce que je veux, c'est comme la fonction montée de Vue ou quelque chose de similaire, à l'intérieur duquel on peut manipuler directement avec les parmamètres.

Y a-t-il quelqu'un qui sait comment atteindre un tel objectif? Merci

Answer 1

Lorsque vous définissez scope: {}, vous avez 3 options différentes pour vos propriétés.

1. =. Cela définit la propriété dans la directive égale à la propriété $scope nommée dans la définition de la directive, dans une relation bidirectionnelle. c'est-à-dire color: '=' et <cat color="black">, la directive parente recherche une propriété $scope.black et tente d'affecter cette propriété à color. Les changements à color changeront black, et vice versa.
2. @. Cela définira la propriété dans la directive égale à la valeur de la variable nommée dans la directive, dans une relation unidirectionnelle. c'est-à-dire <cat color="black"> définira color == "black", immédiatement et au moment de l'initialisation.
3. &. Cela définira la propriété dans la directive égale à une fonction dans le parent. c'est-à-dire <cat color="black"> va définir color == black, et color() va exécuter black().

donné cela, pour accomplir ce que vous attendez, vous avez 3 options:

• créer une propriété $scope.black dans la société mère, et le mettre à une valeur de chaîne.
• Transmettez votre valeur en tant qu'objet de chaîne anonyme, c'est-à-dire <cat color="'black'">. Remplacez votre scope par color: '@'.

Exemples: http://plnkr.co/edit/byxhKtAewLgOrFpRU8dg?p=preview