Comment utiliser ngChange dans la coutume de la directive

Je veux créer directive pour basculer bouton, j'ai un code que je veux mettre dans la directive:

<div class="toggle-button" ng-class="{true: toggleTrue === true, false: toggleTrue === false}">
    <button class="true" ng-click="toggleTrue = true">Y</button><button class="false" ng-click="toggleTrue = false">N</button>
</div>

(Je ne travailler sur le changement de style, c'est pourquoi je n'ai que le changement de classe)

Je veux avoir quelque chose comme:

<toogle ng-change="SomeFunction()" ng-model="someValue" />

comment puis-je travailler avec ng-changement dans ma directive? Dois-je simplement analyser attr ou utiliser l'attribut scope ou est-il un code comme avec ngModel qui doivent être utiliser avec ngChange.

OriginalL'auteur jcubic | 2014-06-18

Par essais et erreurs, j'ai trouvé un code qui travaillent avec ngModel et ngChange:

return {
    restrict: 'E',
    require: 'ngModel',
    scope: {},
    template: '<div class="toggle-button" ng-class="{true: toggleValue === true, false: toggleValue === false}">'+
        '<button class="true" ng-click="toggle(true)">Y</button>'+
        '<button class="false" ng-click="toggle(false)">N</button>'+
        '</div>',
    link: function(scope, element, attrs, ngModel) {
        ngModel.$viewChangeListeners.push(function() {
            scope.$eval(attrs.ngChange);
        });
        ngModel.$render = function() {
            scope.toggleValue = ngModel.$modelValue;
        };
        scope.toggle = function(toggle) {
            scope.toggleValue = toggle;
            ngModel.$setViewValue(toggle);
        };
    }
};

Pour unknow raison scope: true ne travaille pas (si j'ai $champ d'application.bascule variable utilisée comme modèle, il essaie de l'exécuter boolean au lieu d'une fonction)

Ma variante est plus simple 😉
oui, mais il ne fonctionne pas avec le nom ngModel et ngChange, et je veux avoir ces noms.
votre variante peut être "simple", mais il pourrait certainement utiliser quelques détails sur la façon dont il fonctionne.

OriginalL'auteur jcubic

1

Essayer de cette façon:

contrôleur:
```
$scope.someFunction = function(){...};
$scope.someValue = false;
```
vue:
```
<toggle change="someFunction" value="someValue"/>
```
directive (dans le cas où someValue est toujours booléenne (true/false):
```
app.directive('toggle', function(){
    return{
        restrict: 'E',
        replace: true,
        template: ''+ 
            '<div class="toggle-button" ng-class="toggleValue">'+
                '<button ng-class="toggleValue" ng-click="change()">{{toggleValue&&\'Y\'||\'N\'}}</button>'+
            '</div>',
        scope: {
            toggleValue: '=value',
            toggleChange: '=change'
        },
        link: function(scope){
            scope.change = function(){
                scope.toggleValue = !scope.toggleValue;
                scope.toggleChange();
            }
        }
    };
})
```
Je veux avoir un modèle. Si le modèle est modifié, je veux changer de travail de l'élément et ngChange devrait être congédié.
Pour quoi? Vous aurez votre someValue dans le contrôleur être changé à chaque bascule.
Si vous modifiez la valeur de someValue dans le contrôleur d'état bouton va changer. Pour le feu d'une fonction à l'extérieur de la directive de changement, vous pouvez modifier la directive de liaison de la fonction de cette manière: link: function(scope){ scope.change = function(){ scope.toggleValue = !scope.toggleValue; }; scope.$watch('toggleValue', scope.toggleChange); }
Vous avez une erreur dans votre code Y et N est en dehors de la chaîne. Aussi je veux avoir 2 boutons et qu'ils devraient changer de classe dépend de ce qui est sélectionné.
Et je veux ngModel parce que sementicaly Angulaire il est utilisé pour maintenir un modèle.

OriginalL'auteur gorpacrate

Vous devez vous connecter pour publier un commentaire.