我创建了一个使用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}}
的形式获得结果。不是那个价值。但是当我检查函数传递期望值时。
那么为什么期望值没有进入该函数?
我通过更改我的指令html tamplate解决了这个问题。我从中删除了'
和{{
,如下所示。
ng-click="getUserDetails(userList.SessionId)"
答案 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
,它应该提供对用户相关信息和方法的应用程序范围的访问。