CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-ng-click
Simon Hunter
Simon Hunter

Reputation: 1

ng-click inside templateUrl directive not woking

Sorry if this is a stupid question, but I'm a new to Angular. I have an ng-click event that worked before I put the code in a directive. I understand it's probably to do with the scope, but can't seem to fix it.

I have an html file I reference 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>

Called from a js file:

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

    };
});

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

Upvotes: 0

Views: 446

Answers (3)

Shashank
Shashank

Reputation: 2060

Please note that the method that you are trying to access from templateUrl in the directive, should be defined under link of the same directive.

So as per your code, the link method would be as somewhat as below:

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

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

Upvotes: 1

Tom Shen
Tom Shen

Reputation: 1045

Your directive is not linked to any controllers, so your ng-click inside your directive will not work.

You need to create a new controller and move your functions 'plusOneAdult' and 'minusOneAdult' to this new controller and bind it to your directive like this :

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

Use the functions in your html like this : Vm.plusOneAdult() and Vm.minusOneAdult()

Upvotes: 0

Sparw
Sparw

Reputation: 2743

Your 'plusOneAdult()' and 'minusOneAdult()' methods has to be passed to your directive like this:

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

And you have to get back these functions in your directive like this:

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

    };

Upvotes: 1

Related Questions