Javascript ng在templateUrl指令中单击不工作

如果这是一个愚蠢的问题，很抱歉，但我是新来的

Angular

。在将代码放入指令之前，我有一个

ng click

事件。我理解这可能与范围有关，但似乎无法修复它

我从

模板URL

中引用了一个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>

使用以下命令从我的主页调用：

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

您的'plusOneAdult（）'和'minusOne成人（）'方法必须像下面这样传递给您的指令：

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

    };

您的'plusOneAdult（）'和'minusOne成人（）'方法必须像下面这样传递给您的指令：

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

    };

---

指令未链接到任何控制器，因此指令内的ng单击将不起作用

您需要创建一个新控制器，并将函数“plusOneDult”和“minusOne成人”移动到此新控制器，并将其绑定到您的指令，如下所示：

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

---

像这样使用html中的函数：Vm.plusOneDult（）和Vm.minusOne成人（）

您的指令未链接到任何控制器，因此您在指令内的ng单击将不起作用

您需要创建一个新控制器，并将函数“plusOneDult”和“minusOne成人”移动到此新控制器，并将其绑定到您的指令，如下所示：

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

---

像这样使用html中的函数：Vm.plusOneDult（）和Vm.minusOne成人（）

请注意，您试图从

指令中的
模板URL
访问的方法应该在同一
指令的
链接下定义

因此，根据您的代码，链接方法大致如下所示：

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

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

请注意，您试图从
指令
中的
模板URL
访问的方法应在同一
指令
的
链接
下定义

因此，根据您的代码，链接方法大致如下所示：

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

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