如何在 Angular-js 指令中定义一个函数 [英] How to define a function inside Angular-js Directive

问题描述

我创建了一个指令，用于使用引导程序的下拉元素选择用户.如下.

Javascript

app.directive('usersDropdown', function(ConfigService,$http) {返回 {templateUrl: 'app/views/users_dropdown.html',链接:函数($scope，元素，属性){});};});

users_dropdown.html

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

<小时>

修改

我修改了我的指令的js如下

app.directive('usersDropdown', function(ConfigService,$http) {返回 {templateUrl: 'app/views/users_dropdown.html',链接:函数($scope，元素，属性){$scope.getUserDetails = function(user_id){控制台日志(用户 ID)；}}};});

为此，我在控制台中得到的结果为 {{userList.SessionId}}.不是那个价值.但是当我检查时，该函数正在传递预期值.

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

<小时>

已解决

我通过更改指令 html 模板解决了这个问题.我删除了 ' 和 {{ ，如下所示.

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

解决方案

link Directive函数是一个js函数，在里面你可以做任何事情

app.directive('usersDropdown', function(ConfigService,$http) {返回 {范围 : {}，templateUrl: 'app/views/users_dropdown.html',链接:函数($scope，元素，属性){$scope.somefunction = function(a) {//做一些事情}}};});

如果您不希望从指令外部访问此功能，您也应该使用隔离范围来完成.

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.

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)"

解决方案

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.

这篇关于如何在 Angular-js 指令中定义一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！