Ecrire une directive qui utilise md-radio-group
Bonjour,
Je suis sous Angular 1.x. J'essai d'écrire une directive pour créer une liste avec boutons radios avec un champ de recherche.
Pour les boutons radios, j'utilise la bibliothèque Angular Material dans sa version 1.1.3
Voici le code de ma directive :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| app.directive('filterRadioList', function() {
var controller = function ($scope) {
$scope.filterText = '';
$scope.selection = null;
$scope.getItems = function () {
return $scope.items.filter((item) => item.indexOf($scope.filterText) > -1);
};
$scope.select = function (item) {
$scope.selection = item;
}
};
return {
restrict: 'E',
scope: {
items: '=',
title: '@',
placeholder: '@',
onChange: '&'
},
controller: controller,
templateUrl: 'app/partials/filter-radio-list.html'
}
}); |
Et voici le template HTML associé :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <md-card md-theme-watch>
<md-card-title>
<md-card-title-text>
<span class="md-headline"><small>{{ title }}</small></span>
<span class="md-subhead">
<md-input-container>
<label>{{ placeholder }}</label>
<input ng-model="filterText">
</md-input-container>
<i ng-click="filterText = ''" class="material-icons">cancel</i>
</span>
</md-card-title-text>
</md-card-title>
<md-content-card style="height: 200px; padding-left: 50px; overflow-y: auto">
<md-radio-group ng-change="select(item)" ng-model="selection" ng-repeat="item in getItems()">
<md-radio-button ng-value="item" class="md-primary">{{ item }}</md-radio-button>
</md-radio-group>
</md-content-card>
</md-card> |
Lorsque j'utilise ce code en dehors d'une directive, c'est-à-dire directement dans un contrôleur, tout fonctionne.
Mais quand j'utilise ma directive avec cette balise :
Code:
<filter-radio-list items="['a', 'b', 'c']" title="Lettres" placeholder="lettre?"></filter-radio-list>
Le code correspondant s'affiche bien mais les cases restent cochées lorsque l'on clique sur une autre radio.
La variable du scope selection est bien mise à jour mais la mise à jour de l'affichage n'est pas répercutée. Lorsque j'effectue une filtrage avec le champ de recherche et que je l'efface. Les cases sont correctement décochée.
J'ai essayé un $scope.$apply(); après la mise à jour de la sélection dans la fonction select() du contrôleur mais j'ai l'erreur : $digest already in progress when calling $scope.$apply()
Avez-vous une solution ?
Merci d'avance,
