Apologies if this appears to be a silly question, but I am new to Angular. I am facing an issue with an ng-click event that was functioning correctly until I moved the code into a directive. I suspect it has something to do with the scope, but I'm unable to resolve it.
Here is the html file I am referencing from 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>
Referenced in a js file:
app.directive('flightInfo', function () {
return {
restrict: 'E',
scope: {
flight: '='
},
templateUrl: 'js/directives/flightInfo.html'
};
});
It is called from my main page using:
<div ng-repeat="flight in flights | orderBy:'price'" class="col-xs-12 col-sm-6">
<flight-info flight="flight"></flight-info>
</div>