How to define a function inside Angular-js Directive

Question

I created a directive for selecting users using bootstrap's drop-down element. as follows.

Javascript

app.directive('usersDropdown', function(ConfigService,$http) {
    return {
        templateUrl: 'app/views/users_dropdown.html',
        link: function($scope, element, attrs) {
        });
    };
});

users_dropdown.html

<div class="btn-group pull-right" >
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="">
        Select User
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu pull-right align-left" role="menu" aria-labelledby="dropdownMenu">
        <li ng-repeat = "userList in userLists"><a ng-click="getUserDetails('{{userList.SessionId}}')" style="cursor:pointer">{{userList.UserPartyName}}</a></li>
        <li ng-hide="userLists" style="cursor:pointer"><a>No Users</a></li>
    </ul>
</div>

I need to create a function getUserDetails, which should be called while clicking on a user from the list. My question is how to define this function inside the directive itself? I wrote it in the controller. But the problem is I am having several controllers. It's not a good practice to write the same function in all controllers. If I can wrote the function common for all controller, that is inside the directive, it will be good. If you have a good solution, let me know that.

Modification

I modified my directive's js as follows

app.directive('usersDropdown', function(ConfigService,$http) {
    return {
        templateUrl: 'app/views/users_dropdown.html',
        link: function($scope, element, attrs) {
            $scope.getUserDetails = function(user_id){
                console.log(user_id);
            }
        }
    };
});

For this I am getting the result in the console as {{userList.SessionId}}. Not the value for that. But when I Inspected the function is passing expected value. enter image description here

Then why the expected value is not getting inside of that function?

Solved

I solved the issue by changing my directives html tamplate. I removed ' and {{ from it as follows.

ng-click="getUserDetails(userList.SessionId)"

John B · Accepted Answer · 2015-06-24 18:07:19Z

23

The link Directive function is a js function, inside which you may do anything

app.directive('usersDropdown', function(ConfigService,$http) {
    return {
        scope : {},
        templateUrl: 'app/views/users_dropdown.html',
        link: function($scope, element, attrs) {
            $scope.somefunction = function(a) {
                // Do some stuff
            }
        }
     }; 
});

Also you should use isolated scope to accomplish, if you want this function not be accesible from outside the directive.

edited Jun 24, 2015 at 18:07

John B♦

20.5k35 gold badges125 silver badges173 bronze badges

answered Nov 18, 2013 at 12:34

icanbeacoder

1,3881 gold badge13 silver badges30 bronze badges

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

5 Comments

icanbeacoder Over a year ago

Edited, It was meant just for better application design :D, sot that functions may not conflict.

Wottensprels Over a year ago

Thanks for the clarification. But could they ever trigger a conflict if one would declare them as singletons and not bound to the scope?

icanbeacoder Over a year ago

When not bound to scope, you won't be able to call the function from template.

Sajith Over a year ago

I modified my code as you mentioned. But I got one issue. Please check the modified question.

Monojit Sarkar Over a year ago

how to call somefunction() function from controller function? possible ?

Wottensprels · Accepted Answer · 2013-11-18 12:19:19Z

3

If you find yourself in the need of a function or data variable in various places along your application, it could possibly be a good solution to move some of your logic into a service.

You could, for example, create a user service, which should provide application-wide access to user-related information and methods.

answered Nov 18, 2013 at 12:19

Wottensprels

3,3273 gold badges31 silver badges39 bronze badges

2 Comments

Sajith Over a year ago

Thank you for your answer. I will try by creating a service. But is it possible to define functions inside directive?

Wottensprels Over a year ago

You're welcome. As you suggested, you can define functions for your directive inside the directives controller function. You could do it in the linking function aswell. It depends on the actual use case, what you should go for. A directive with a private or isolate scope should be independent from the rest of your applications controllers. If you are in the need of a function which depends heavily on the rest of your application, consider an architectural refactoring

Collectives™ on Stack Overflow

How to define a function inside Angular-js Directive

Modification

Solved

2 Answers 2

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Modification

Solved

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related