AngularJS execute controller function in directive template

Question

I made a custom directive with AngularJS, and in the template I called a function in controller, but it didn't work.

thanks for your help :)

<div ng-contorller="myCtrl">
    <ng-selectbox my-function="myfunction()" items="codes"></ng-selectbox>
</div>

myapp.controller("myCtrl", function($scpoe){
  $scope.myfunction= function(){
    alert("123");
  };
});

myapp.directive("ngSelectbox", function(){
  return {
    restrict: "E",
    scope: {
      items: "=",
      myfunction: "&"
    },
    template:
    "<div id='selectbox'>" +
    "<ul ng-repeat='item in items'>" +
    "<li ng-click='myfunction()'>{{item.TYPE}}</li>" +
    "</ul>" +
    "</div>"
  };
});

where is your controller

stanze
– stanze

2015-03-26 09:48:41 +00:00
Commented Mar 26, 2015 at 9:48 — stanze
– stanze, Commented Mar 26, 2015 at 9:48

Anand Gargate · Accepted Answer · 2015-03-26 09:52:59Z

3

Do not add calling brackets where you are using your directive , just use like this <ng-selectbox my-function="myfunction" items="codes"></ng-selectbox>

answered Mar 26, 2015 at 9:52

Anand Gargate

4995 silver badges19 bronze badges

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

7 Comments

kathy Over a year ago

thank you, tried but didn't work :( and what if I want to pass parameter through myfunction?

Anand Gargate Over a year ago

Hey, got the solution, you have used my-function attribute, and in directive myfunction instead of myFunction , just replace myfunction with myFunction and it will work, see working example plnkr.co/edit/1CblTUHoMTZMKLOf4INE?p=preview

kathy Over a year ago

THANK YOU SO MUCH! It really had confused me for a long time... thank you for solving it.

Anand Gargate Over a year ago

Yes sure, check working example(check console) : plnkr.co/edit/1CblTUHoMTZMKLOf4INE?p=preview

Anand Gargate Over a year ago

Just modify function scope to '='(two way binding).

|

Raja Sekar · Accepted Answer · 2015-03-26 09:48:48Z

0

You should place your directive inside your controller wrapper like below.

<div ng-controller="myCtrl">
     <ng-selectbox my-function="myfunction()" items="codes"></ng-selectbox>
</div>

answered Mar 26, 2015 at 9:48

Raja Sekar

2,14017 silver badges23 bronze badges

1 Comment

kathy Over a year ago

Yes, it is inside my controller, sorry I didn't mention that.

Collectives™ on Stack Overflow

AngularJS execute controller function in directive template

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related