How can I ng-click a function from my angular-js directive?

Question

I cant figure how to call a function from my directive using ng-click.

This is an example of my HTML:

 <div>
    <directive-name data="exemple">
        <button class=btn btn-primary type="submit" ng-click="search()">
    </directive-name>
</div>

This is an example of my javascript :

...
.directive('directiveName', ['exempleService', function(exempleService) {
    function link(scope, element, attrs) {

        scope.search = function() {
            console.log("this is working")
        };
    };

    return {
        link: link,
        restrict: 'E',
        scope: {data:'=',
        search:'&'}
    }

}]);

Thanks in advance! :)

daan.desmedt · Accepted Answer · 2016-08-08 15:22:57Z

1

You have to create a directive which includes the button inside the directive template (either as HTML or external file).

VIEW

<div ng-app="app">
  <directive-name data="exemple"></directive-name>
</div>

DIRECTIVE

var app = angular.module('app', [])

app.directive('directiveName', function() {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      scope.search = function() {
        alert('boe');
      }
    },
    template: '<button class=btn btn-primary type="submit" ng-click="search()">CLICK</button>'

  }
})

FIDDLE

answered Aug 8, 2016 at 15:22

daan.desmedt

3,8201 gold badge22 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dan M. CISSOKHO · Accepted Answer · 2016-08-08 15:20:18Z

0

Your button should be in your directive template

.directive('directiveName', ['exempleService', function(exempleService) {
    function link(scope, element, attrs) {

        scope.search = function() {
            console.log("this is working")
        };
    };

    return {
        link: link,
        restrict: 'E',
        template: '<div><button class=btn btn-primary type="submit" ng-click="search()"></div>'
        scope: {data:'=',
        search:'&'}
    }

}]);

answered Aug 8, 2016 at 15:20

Dan M. CISSOKHO

1,0851 gold badge14 silver badges28 bronze badges

Collectives™ on Stack Overflow

How can I ng-click a function from my angular-js directive?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related