ng-click里面的templateUrl指令没有woking

时间:2016-06-03 08:30:26

标签: javascript angularjs angularjs-directive angularjs-ng-click

很抱歉,如果这是一个愚蠢的问题,但我是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>

3 个答案:

答案 0 :(得分: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'

    };

答案 1 :(得分:1)

请注意,您尝试从templateUrl directive访问的方法应定义在同一link的{​​{1}}下。

根据您的代码,链接方法将如下所示:

directive

答案 2 :(得分:0)

您的指令未链接到任何控制器,因此您在指令中的ng-click将无效。

您需要创建一个新控制器并将您的函数'plusOneAdult'和'minusOneAdult'移动到这个新控制器并将其绑定到您的指令,如下所示:

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.plusOneAdult()和Vm.minusOneAdult()