如何定义角JS指令里面的函数 [英] How to define a function inside Angular-js Directive

问题描述

我创建了选择使用引导程序的下拉元素的用户指令。如下：

的JavaScript

  app.directive（'usersDropdown'，函数（的ConfigService，$ HTTP）{
    返回{
        templateUrl：应用程序/视图/ users_dropdown.html'，
        链接：功能（$范围，元素，ATTRS）{
        }）;
    };
}）;
 

users_dropdown.html

 ＆LT; D​​IV CLASS =BTN-组右拉式＆GT;
    ＆LT;一类=BTN下拉菜单，切换数据切换=下拉菜单中的href =＆GT;
        选择用户
        ＆LT;跨度类=插入符号＆GT;＆LT; / SPAN＆GT;
    ＆所述; / A＆GT;
    ＆LT; UL类=下拉菜单中拉右对齐左角色=菜单中的咏叹调-labelledby =dropdownMenu＆GT;
        ＆LT;李NG重复=用户列表中的用户列表＆GT;＆LT;一个NG点击=getUserDetails（'{{userList.SessionId}}'）的风格=光标：指针＆GT; {{userList.UserPartyName} }＆LT; / A＆GT;＆LT; /李＆GT;
        ＆LT;李NG隐藏=用户列表的风格=光标：指针＆GT;＆LT; A＆GT;没有用户＆LT; / A＆GT;＆LT; /李＆GT;
    ＆LT; / UL＆GT;
＆LT; / DIV＆GT;
 

我需要建立一个函数 getUserDetails ，它应该同时从列表中选择用户点击调用。我的问题是如何定义的指令本身里面这个功能呢？我在控制器写的。但问题是我有几个控制器。这不是写在所有控制器相同功能的很好的做法。如果我可以写共同为所有控制器的功能，即该指令内，这将是良好的。如果你有一个很好的解决方案，让我知道。

---

修改

我修改指令的JS如下：

  app.directive（'usersDropdown'，函数（的ConfigService，$ HTTP）{
    返回{
        templateUrl：应用程序/视图/ users_dropdown.html'，
        链接：功能（$范围，元素，ATTRS）{
            $ scope.getUserDetails =功能（USER_ID）{
                的console.log（USER_ID）;
            }
        }
    };
}）;
 

有关这个我得到的结果在控制台中的 {{} userList.SessionId} 。不为该值。但是，当我检查的功能是传递期望值。

那么，为什么预期值是没有得到该函数里面？

---

解决

我改变我的指令HTML tamplate解决的问题。我删除 和 {{从中如下：

  NG-点击=getUserDetails（userList.SessionId）
 

解决方案

链接指令功能是一个js函数，这里面可能你做任何事情。

  app.directive（'usersDropdown'，函数（的ConfigService，$ HTTP）{
    返回{
        范围 ： {}，
        templateUrl：应用程序/视图/ users_dropdown.html'，
        链接：功能（$范围，元素，ATTRS）{
            $ scope.somefunction =函数（）{
                //做一些东西
            }
        }
     };
}）;
 

另外，应使用隔离的范围来完成的，如果你想要这个功能不能从外面指令入店。

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.

这篇关于如何定义角JS指令里面的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！