ng-klick innerhalb von templateUrl Direktive nicht woking

Question

Sorry, wenn das eine dumme Frage ist, aber ich bin neu zu Angular. Ich habe ein ng-click Ereignis, das funktionierte, bevor ich den Code in eine Direktive einsetzte. Ich verstehe, dass es wahrscheinlich mit dem Umfang zu tun hat, aber es scheint nicht zu beheben.

Ich habe eine HTML-Datei verweisen ich von templateUrl:

<div class="thumbnail"> 
    <p class="title">{{ flight.origin }}</p> 
    <p class="title">{{ flight.destination }}</p> 
    <p class="title">{{ flight.airline }}</p> 
    <p class="date">{{ flight.deptime | date: 'medium' }}</p> 
    <p class="date">{{ flight.arrtime | date: 'medium' }}</p> 
    <p class="price">{{ flight.price | currency }}</p> 
    <div class="pax"> 
     <p>Adults: {{ flight.paxadult }}</p> 
     <p class="likes" ng-click="plusOneAdult($index)">+ </p> 
     <p class="dislikes " ng-click="minusOneAdult($index)">-</p> 
    </div> 
</div> 

Called aus einer js Datei:

app.directive('flightInfo', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      flight: '=' 
       }, 
     templateUrl: 'js/directives/flightInfo.html' 

    }; 
}); 

Welche von meinem Haupt-Seite mit genannt wird:

<div ng-repeat="flight in flights | orderBy:'price'" class="col-xs-12 col-sm-6"> 
     <flight-info flight="flight"></flight-info> 
    </div> 

Answer 1

Ihre Methoden 'plusOneAdult()' und 'minusOneAdult()' müssen an Ihre Anweisung übergeben werden dies wie:

<div ng-repeat="flight in flights | orderBy:'price'" class="col-xs-12 col-sm-6"> 
     <flight-info minus-one-adult-fn="minusOneAdult" plus-one-adult-fn="plusOneAdult" flight="flight"></flight-info> 
    </div> 

Und Sie haben diese Funktionen in Ihrer Richtlinie wie folgt zurück:

return { 
     restrict: 'E', 
     scope: { 
      flight: '=', 
      minusOneAdultFn:'=', 
      plusOneAdultFn:'=' 
       }, 
     templateUrl: 'js/directives/flightInfo.html' 

    }; 

Answer 2

Ihre Richtlinie ist auf beliebige Steuerungen nicht verbunden, so dass Ihr in Ihrer Richtlinie-ng klicken, wird nicht Arbeit.

Sie benötigen einen neuen Controller zu erstellen und die Funktionen ‚plusOneAdult‘ und ‚minusOneAdult‘ auf diese neuen Controller bewegen und binden es wie folgt auf Ihre Richtlinie:

app.directive('flightInfo', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      flight: '=' 
     }, 
     templateUrl: 'js/directives/flightInfo.html' 
     controller: 'js/directives/flightInfoController.js', 
     controllerAs: 'Vm', 
     bindToController: true 
    }; 
}); 

Verwenden Sie die Funktionen in Ihrem html wie folgt : Vm.plusOneAdult() und Vm.minusOneAdult()

Answer 3

Bitte beachten Sie, dass die Methode, die Sie für den Zugriff von templateUrl im directive versuchen sollte unter link der gleichen directive definiert werden.

So wie pro Ihren Code, würde die Verbindung Methode wie etwas sein, wie unten:

templateUrl: 'js/directives/flightInfo.html', 
link: function(scope, ele, attr) { 
    scope.plusOneAdult = function(id) { 
     // your code 
    }; 

    scope.minusOneAdult = function(id) { 
     // your code 
    } 
}