Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to define a function inside Angular-js Directive

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)"
like image 862
Sajith Avatar asked Nov 18 '13 12:11

Sajith


1 Answers

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.

like image 153
icanbeacoder Avatar answered Sep 20 '22 20:09

icanbeacoder