Angulaire de l'interface utilisateur-les événements de la grille dans la cellule d'en-tête de pas de tir

Je suis en utilisant un headerCellTemplate dans le columDefs de mon interface utilisateur-réseau (pas de ng-grille, mais la nouvelle de réécriture). Dans le html, j'ai une case à cocher. Essentiellement, je suis en train d'ajouter une case à cocher dans l'en-tête d'une colonne toutes les cases afin que je puisse vérifier tous/aucun. La cellule rend très bien avec la case à cocher. Le problème est que le ng-changement dans la case dans l'en-tête n'est jamais déclenché l'événement. En outre, le ng-modèle de la valeur ne change jamais.
En regardant le code, il existe une directive utilisée appelé uiGridHeaderCell donc je suppose que c'est engloutir mon cas ainsi que dans son propre champ d'application de sorte qu'il ne définit jamais la variable dans mon champ d'action.

Moyen de contourner ce problème? Tous les exemples que j'ai rencontré personne n'a jamais essayé de les appeler leur propre méthode à partir de l'en-tête (c'est à dire l'appel de quelque chose en dehors du champ d'application de la directive).

Pouvez-vous s'il vous plaît mettre jsfiddle ou quelque chose comme ça ?

OriginalL'auteur Scott | 2014-10-29

angular-ui-grid angularjs

Dans l'interface utilisateur de la grille il y a une fonctionnalité appelée externalScopes qui peut être utile pour vous. Le tutoriel est ici

C'est la nouvelle headerCellTemplate:

<div ng-class="{ 'sortable': sortable }">
  <div class="ui-grid-vertical-bar">&nbsp;</div>
  <div class="ui-grid-cell-contents" col-index="renderIndex">
    <input type="checkbox" ng-click="$event.stopPropagation();getExternalScopes().showMe()">{{ col.displayName CUSTOM_FILTERS }}
    <span ui-grid-visible="col.sort.direction" ng-class="{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }">
&nbsp;
</span>
  </div>
  <div class="ui-grid-column-menu-button" ng-if="grid.options.enableColumnMenus && !col.isRowHeader && col.colDef.enableColumnMenu !== false" class="ui-grid-column-menu-button" ng-click="toggleMenu($event)">
    <i class="ui-grid-icon-angle-down">&nbsp;</i>
  </div>
  <div ng-if="filterable" class="ui-grid-filter-container" ng-repeat="colFilter in col.filters">
    <input type="text" class="ui-grid-filter-input" ng-model="colFilter.term" ng-click="$event.stopPropagation()" ng-attr-placeholder="{{colFilter.placeholder || ''}}" />
    <div class="ui-grid-filter-button" ng-click="colFilter.term = null">
      <i class="ui-grid-icon-cancel right" ng-show="!!colFilter.term">&nbsp;</i> 
      <!-- use !! because angular interprets 'f' as false -->
    </div>
  </div>
</div>

(Note de l'entrée de type case à cocher sur la ligne 4)

Aussi j'ai ajouté $event.stopPropagation() d'arrêter l'épreuve d'atteindre le sous-jacent div.

Dans le code HTML que vous avez à écrire:

<div ui-grid="gridOptions" external-scopes="myViewModel" class="grid"></div>

Regardez cette Plunker pour plus de détails

Wow. Donc il s'est avéré tout cela avait à voir avec le RC candidat, j'ai été à l'aide. J'ai essayé un tas de différents, y compris ceux qui portent la mention "stable" et la SEULE qui a fonctionné a été l'un de vous de référence dans le PLNKR qui est la distribution "unstable" de l'étiquette. C'était un pain PITA en passant par eux. Merci.
Il ne semble pas comme externalscopes est pris en charge plus, ce qui est la nouvelle façon de faire cela?

OriginalL'auteur mainguy

42

Externe-Périmètres n'est plus utilisé que de ~3.0.7 Accéder à Portée de modèles

Vous pouvez maintenant ajouter de la grille.appScope comme ceci dans votre cellTemplate:
```
ng-click="grid.appScope.myFunction()"
```
Elle fonctionne. Merci
Cela devrait être la réponse. La réponse actuelle est plus pris en charge.
D'accord, c'est la bonne réponse à aujourd'hui.

OriginalL'auteur Marcus Showalter
8

Lors de l'utilisation Angulaire du controllerAs syntaxe...

ng-click="grid.appScope.vm.editRow(grid, row)"

exemple: http://plnkr.co/edit/D48xcomnXdClccMnl5Jj?p=preview

Merci cela a fonctionné pour moi. 🙂

OriginalL'auteur Homer
2

J'ai essayé la solution suivante & il a travaillé pour moi.

ng-click="grid.appScope.$parent.mafonction()"

$champ d'application.fonction = myfunction(){
}

OriginalL'auteur Bhaurao Birajdar

Vous devez vous connecter pour publier un commentaire.