如何在Angular-js指令中定义一个函数

时间:2013-11-18 12:10:23

标签: javascript function angularjs angularjs-directive

我创建了一个使用bootstrap的下拉元素选择用户的指令。如下。

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

我需要创建一个函数getUserDetails,在从列表中单击用户时应该调用它。我的问题是如何在指令本身内定义这个函数?我在控制器中写了它。但问题是我有几个控制器。在所有控制器中编写相同的功能并不是一个好习惯。如果我可以为所有控制器编写通用函数,那就是在指令中,它会很好。如果您有一个好的解决方案,请告诉我。


修改

我修改了我的指令js如下

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);
            }
        }
    };
});

为此我在控制台中以{{userList.SessionId}}的形式获得结果。不是那个价值。但是当我检查函数传递期望值时。 enter image description here

那么为什么期望值没有进入该函数?


解决

我通过更改我的指令html tamplate解决了这个问题。我从中删除了'{{,如下所示。

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

2 个答案:

答案 0 :(得分:23)

链接指令功能是一个js功能,您可以在其中执行任何操作

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
            }
        }
     }; 
});

如果你希望这个函数不能从指令外部访问,你也应该使用隔离范围来完成。

答案 1 :(得分:3)

如果您发现自己需要在应用程序的不同位置使用函数或数据变量,那么将某些逻辑移动到service可能是一个很好的解决方案。

例如,您可以创建一个user service,它应该提供对用户相关信息和方法的应用程序范围的访问。