Angularjs NG-Click non funziona in NG-Grid

Question

Sto creando un'applicazione MVC ASP.NET e in quanto mostrando NG-Grid con una colonna che ha collegato come contenuto cellulare.

Ecco come l'ho raggiunto.
Controller (NG-Grid):

columnDefs: [
 { field: 'FreightRules', visible: true, 
    cellTemplate: 
     '<div class="rulesDirective" freight-rules="{{row.entity.FreightItemGuid}}">
          </div>', 
    enableCellEdit: false, enableCellSelection: false }]

.

Direttiva:

directives.directive('rulesDirective', function () {
    return {
        restrict: 'C',
        replace: true,
        transclude: true,
        scope: { freightRules: '@freightRules' },
        template: '<div ng-switch on="freightRules | areRulesAvailable">' +
                  '<div ng-switch-when = true><a ng-click="getRulesTest(\'{{freightRules}}\')" href="#addFreightRuleModal">Rules</a></div>' +
                  '<div ng-switch-when = false>No Rules</div>' +
                  '<div ng-switch-default class="grid">Error</div>' +
               '</div>'
        }});

.

Filtro:

filters.filter('areRulesAvailable', function () {
    return function (value) {
        if (value != '00000000-0000-0000-0000-000000000000') {
            result= true;
        }
        else {
            result = false;
        }
        return result;
    };
});

.

Funziona bene ma quando clicco sul collegamento Rules non sono in grado di visualizzare la finestra di dialogo.

Ho provato ad aprire la finestra di dialogo facendo clic su un pulsante separatamente e ha funzionato.Hai bisogno di aiuto!

Answer 1

Poiché la tua direttiva ha un Scope isolato (vedere Isolando la portata di una direttiva ), che posso dire perché la sua dichiarazione contiene scope: {...}, la direttiva limiterà gli articoli sulla portata a solo ciò che la tua direttiva definisce.

È possibile per le direttive ereditare gli elementi da uno scopo genitore, o addirittura utilizzare lo stesso ambito del genitore, ma non sarà in questo caso.

Quando si dispone di un ambito isolato, l'unico modo per definire gli elementi su tale scopo è quello di posizionarli lì in un controller, funzione link, o definirli come opzione scope all'interno della tua direttiva. Ora, se getRulesTest() è specifico solo per la tua direttiva (non riutilizzabile al di fuori di esso, non definito su un controller genitore, ecc.), Quindi semplicemente definirlo nella funzione link (o controller di direttiva se ne ha uno, qualunque sia il senso):

directives.directive('rulesDirective', function () {
    return {
        restrict: 'C',
        replace: true,
        transclude: true,
        scope: { freightRules: '@freightRules' },
        link: function($scope) { // looky here
            $scope.getRulesTest = function() {
                 console.log('check me out');
            };
        },
        template: '<div ng-switch on="freightRules | areRulesAvailable">' +
                  '<div ng-switch-when = true><a ng-click="getRulesTest(freightRules)" href="#addFreightRuleModal">Rules</a></div>' +
                  '<div ng-switch-when = false>No Rules</div>' +
                  '<div ng-switch-default class="grid">Error</div>' +
               '</div>'
        }});

.

Dal momento che non lo si definisce mai all'interno della portata della direttiva in qualsiasi punto del tuo esempio, presumo che lo stai dichiarando su un controller genitore e stai pensando che dovrebbe semplicemente chiamare fuori dalla portata della direttiva e trovarlo sull'ambito dei genitori. Come ho detto sopra, questo non funzionerà. È possibile utilizzare un'opzione di ambito che si lega a una funzione utilizzando la sintassi &. Ciò consente alla tua opinione Assegnare in modo dichiarato una funzione dalla portata principale della tua direttiva da utilizzare quando deve chiamare.

directives.directive('rulesDirective', function() {
  return {
    restrict: 'C',
    replace: true,
    transclude: true,
    scope: {
      freightRules: '=',
      getRulesTest: '&rulesTest' // <- this guy. the text on the left is what you want the item named on the scope locally. the text on the right, after the & is what the attribute on the element should be called. if you want them to be the same on both sides, simply enter '&'
    },
    template: '<div ng-switch on="freightRules | areRulesAvailable">' +
      '<div ng-switch-when="true"><a ng-click="getRulesTest({rules: freightRules})" href="">Rules</a></div>' +
      '<div ng-switch-when="false">No Rules</div>' +
      '<div ng-switch-default class="grid">Error</div>' +
      '</div>'
  };
})

.

Abbiamo aggiunto l'opzione di ambito alla dichiarazione della tua scope. Ora il tuo controllore principale aggiungerebbe una funzione sull'ambito da tenere a:

.controller('MyCtrl', function($scope) {
   $scope.doSomethingWithRules = function(rules) {
         console.log('sup?');
   };
});

.

E la vista sembrerebbe:

<div class="rules-directive" rules-test="doSomethingWithRules(rules)"></div>

.

L'altra cosa che potrebbe essere problematica è quella che tu stia facendo con questa riga nel modello:

ng-click="getRulesTest(\'{{freightRules}}\')"

.

Stai cercando di passare quella funzione il risultato della stringa valutato di {{freightRules}} (che non sembra molto utile), o vuoi passarlo nell'oggetto freightRules attuale (che sembra più probabile)? Se è così, basta cambiarlo su:

ng-click="getRulesTest({rules: freightRules})"

.

modifica

qui è un sorso con un esempio di funzionamento.

Ho preso un piccolo errore nella mia risposta originale su come chiamare le opzioni di scope della funzione. Ci sono un paio di modi per chiamare le funzioni che hai legato, a seconda che tu abbia o meno parametri e come si desidera corrispondere. Questa parte è un po 'confusa. Se non stai seguendo, basta attaccare all'opzione # 2.

1. Vuoi semplicemente passare il nome della funzione che dovrebbe chiamare, con i parametri determinati ordinalmente.

Dì che vuoi che semplicemente dichiarano (notare che forniamo solo il nome delle regole, nessun parentesi o nomi dei parametri):

<div class="rules-directive" ... rules-test="doSomethingWithRules">

.

Allora la tua direttiva dovrebbe richiamare la funzione come questa (nota che chiamiamo una funzione nuda, che genera un invoker che può essere utilizzato per chiamare effettivamente la funzione, e allora lo chiamiamo con l'attuale Parametri):

ng-click="getRulesTest()(rules)"

.

2. Volete che l'Invaker passerà in argomenti denominati in modo da poter modificare l'ordine o omettere i parametri.

Questo è il meglio illustrato se hai più parametri. Dì che la direttiva fornisce due parametri, paramA e paramB. Si invoca la funzione nella tua direttiva utilizzando un oggetto contenente nomi e valori dei parametri.

ng-click="getRulesTest({paramA: valuesForA, paramB: valuesForB })"

.

Poi quando si utilizza la direttiva, il tuo markup è simile a questo:

<div class="rules-directive" ... rules-test="doSomethingWithRules(paramA, paramB)">

.

Il motivo per cui è preferibile è nella situazione in cui si desidera riordinare o omettere un parametro nella funzione invocata. Diciamo che doSomethingWithRules necessita solo di paramB. Ora posso fare:

<div class="rules-directive" ... rules-test="doSomethingWithRules(paramB)">

.

Non avrei potuto farlo con l'opzione # 1 sopra, perché invoca sempre tutti i parametri ordinalmente. Quindi, l'opzione n. 2 è preferibile perché dà ai consumatori la tua direttiva più flessibilità e li salva il fastidio di dover ricordare quale ordine i parametri vengono forniti alla tua funzione.