AngularJS ng-click funktioniert nicht in ng-grid

Question

Ich erstelle eine ASP.net MVC-Anwendung und darin zeige ich ng-grid mit einer Spalte an, die einen Link als Zellinhalt hat.

So habe ich es erreicht.
Regler (Erdgasnetz):

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

Richtlinie:

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>'
        }});

Filter:

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

Es funktioniert gut, aber wenn ich auf das klicke Rules link Ich kann den Dialog nicht anzeigen.

Ich habe versucht, den Dialog durch Klicken auf eine Schaltfläche separat zu öffnen, und es hat funktioniert.Brauche Hilfe!

Answer 1

Da Ihre Richtlinie eine hat isolierter Anwendungsbereich (sehen Isolierung des Geltungsbereichs einer Richtlinie), was ich sagen kann, weil seine Deklaration enthält scope: {...}, beschränkt die Direktive die Elemente im Gültigkeitsbereich nur auf das, was Ihre Direktive definiert.

Es ist möglich, dass Direktiven Elemente von einem übergeordneten Bereich erben oder sogar denselben Bereich wie der übergeordnete Bereich verwenden, in diesem Fall jedoch nicht.

Wenn Sie einen isolierten Bereich haben, können Sie Elemente in diesem Bereich nur definieren, indem Sie sie dort in einem Controller platzieren, link funktion, oder definieren Sie sie als bereichsoption innerhalb Ihrer Richtlinie.Nun, wenn getRulesTest() ist nur für Ihre Direktive spezifisch (nicht außerhalb davon wiederverwendbar, nicht auf einem übergeordneten Controller definiert usw.).), dann definiere es einfach in deinem link funktion (oder Controller der Direktive, falls vorhanden, was auch immer sinnvoll ist):

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>'
        }});

Da Sie es in Ihrem Beispiel nirgendwo im Geltungsbereich der Richtlinie definieren, gehe ich davon aus, dass Sie es auf einem übergeordneten Controller deklarieren und denken, es sollte einfach aus dem Geltungsbereich der Richtlinie heraus aufgerufen und im übergeordneten Geltungsbereich gefunden werden.Wie ich oben sagte, wird das nicht funktionieren.Sie können eine Bereichsoption verwenden, die mit der Option An eine Funktion gebunden ist & Syntax.Auf diese Weise kann Ihre Ansicht deklarativ eine Funktion aus dem übergeordneten Bereich zuweisen, die Ihre Direktive verwenden soll, wenn sie aufgerufen werden muss.

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>'
  };
})

Wir haben die Bereichsoption zu Ihrem hinzugefügt scope Erklärung.Jetzt würde Ihr übergeordneter Controller eine Funktion für den Bereich hinzufügen, an den gebunden werden soll:

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

Und die Aussicht würde so aussehen:

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

Die andere Sache, die problematisch sein könnte, ist, was auch immer Sie mit dieser Zeile in der Vorlage tun:

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

Versuchen Sie, dieser Funktion das ausgewertete Zeichenfolgenergebnis von zu übergeben {{freightRules}} (was nicht sehr nützlich erscheint), oder möchten Sie es in der tatsächlichen übergeben freightRules objekt (was wahrscheinlicher erscheint)?Wenn ja, ändern Sie es einfach in:

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

Bearbeiten

Hier ist ein Plunk mit einem Arbeitsbeispiel.

Ich habe in meiner ursprünglichen Antwort einen kleinen Fehler beim Aufrufen von Funktionsbereichsoptionen festgestellt.Es gibt verschiedene Möglichkeiten, gebundene Funktionen aufzurufen, je nachdem, ob Sie Parameter haben oder nicht und wie Sie diese anpassen möchten.Dieser Teil ist etwas verwirrend.Wenn Sie nicht folgen, halten Sie sich einfach an Option # 2.

1.Sie möchten einfach die passieren Name der Funktion, die es aufrufen soll, mit Parametern, die ordinär bestimmt werden.

Angenommen, Sie möchten, dass sie einfach angeben (beachten Sie, dass wir nur den Namen der Regeln angeben, keine Klammern oder Parameternamen):

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

Dann sollte Ihre Direktive die Funktion wie folgt aufrufen (beachten Sie, dass wir eine bloße Funktion aufrufen, die einen Aufrufer generiert, mit dem die Funktion tatsächlich aufgerufen werden kann, und dann wir nennen es mit den tatsächlichen Parametern):

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

2.Sie möchten, dass der Aufrufer benannte Argumente übergibt, damit Sie die Reihenfolge von Parametern ändern oder weglassen können.

Dies wird am besten veranschaulicht, wenn Sie mehrere Parameter haben.Angenommen, die Direktive liefert zwei Parameter, paramA und paramB.Sie rufen die Funktion in Ihrer Direktive mit einem Objekt auf, das Parameternamen und -werte enthält.

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

Wenn Sie dann die Direktive verwenden, sieht Ihr Markup folgendermaßen aus:

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

Der Grund, warum dies vorzuziehen ist, liegt in der Situation, in der Sie einen Parameter in der aufgerufenen Funktion neu anordnen oder weglassen möchten.Sagen wir mal doSomethingWithRules nur Bedürfnisse paramB.Jetzt kann ich tun:

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

Ich hätte das mit Option # 1 oben nicht machen können, weil es immer mit allen Parametern ordinär aufgerufen wird.Daher ist Option 2 vorzuziehen, da sie den Verbrauchern Ihrer Richtlinie mehr Flexibilität bietet und ihnen den Aufwand erspart, sich merken zu müssen, in welcher Reihenfolge die Parameter an Ihre Funktion übergeben werden.