javascript - ng-click inside templateUrl 指令不起作用

Question

抱歉，如果这是一个愚蠢的问题，但我是 Angular 的新手。在将代码放入指令之前，我有一个 ng-click 事件起作用。我知道这可能与范围有关，但似乎无法修复它。

我有一个从 templateUrl 引用的 html 文件:

<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>

从 js 文件调用:

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

    };
});

这是从我的主页调用的:

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

Answer 1

您的“plusOneAdult()”和“minusOneAdult()”方法必须传递给您的指令，如下所示:

<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>

您必须像这样在指令中取回这些函数:

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

    };