Angularjs directive creation - angularjs

Question

I have a set of two functions that I user to perform a lookup to identify a user. In my app I need to do this for multiple roles (i.e: requester, processor, etc.). I think I want to create a directive so that I can reuse the code without having to copy and change it for each role - if I understand the concept of a directive.
I made an attempt but instead of an input field actually showing up for me to enter a name in, I see the name of the template html file. I am obviously doing something wrong, but since I am very new to directives (custom and creating them), I am sure I didn't do it right.
What I want is the ability to type a person's name in, and as I type, it should call a function that is doing the actual search. While a match is being looked for, I want a sliding bar to appear to indicate something is occurring. After I choose the appropriate user, I want the name and id retrieved to be stored in my model and the bar will close.
This is what I put in my HTML to call my directive:
<name-user idModel="request.requesterID" nameModel="request.requester"></name-user>
the requesterId and requester are where I want the results....
My directive:
app.directive('nameUser', function() {
return {
restrict: 'E',
require: {
idModel : '=',
nameModel : '='
},
template : 'app/views/nameUser.html',
link : function($scope){
$scope.searchName = function(searchQuery, bar){
var bar = "#loadingBar" + bar;
if(searchQuery && searchQuery.length >= 3){
$(bar).slideDown();
$http.get("/read/userinfo/" + searchQuery ).success(function(data){
$scope.nameSearchResults = data;
$(bar).slideUp();
});
}
}
$scope.selectName = function(pl){
nameModel.$setViewValue(pl.name);
idModel.$setViewValue(pl.user_id);
$scope.nameSearchResults = {};
}
}
};
});
My template has:
<input type="text" class="form-control input-md" ng-model="nameModel" ng-model-options='{ debounce: 800 }' ng-change="searchName(nameModel,'88')" value="nameModel"/>
<div class="row" style="padding:20px;display:none;" id="loadingBar88">
<div class="col-md-6 col-md-offset-5">
<img alt="Brand" src="files/img/loader.gif">
</div>
</div>
<table class="table table-bordered table-hover" ng-show="nameSearchResults.length">
<tr>
<th>User ID</th>
<th>User Name</th>
</tr>
<tr ng-repeat="entry in nameSearchResults" ng-click="selectName(entry)">
<td>{{entry.user_id}}</td>
<td>{{entry.name}}</td>
</tr>
Currently, each time I need a different user id/name for a role, I have to copy the functions and change the names and the bar number...I really think there has to be a way to make this so I can call it multiple times and just pass in the model values I want. While the code above does not give me any errors, it does not provide me the input field and functionality to perform the lookup....please help.

Answer 1

I had to change my directive a little based on the issues pointed out, plus one I figured out after those changes were made. I needed changes to my directive and a change to my HTML, so I will post the final versions that appear to be working.
app.directive('nameUser', function() {
return {
restrict: 'E',
scope: { //CHANGED TO 'SCOPE'
idModel : '=',
nameModel : '='
},
templateUrl : 'app/views/nameUser.html', // ADDED 'Url'
link : function($scope,nameModel,idModel){ // ADDED THE TWO SCOPE NAMES
$scope.searchName = function(searchQuery, bar){
var bar = "#loadingBar" + bar;
if(searchQuery && searchQuery.length >= 3){
$(bar).slideDown();
$http.get("/read/userinfo/" + searchQuery).success(function(data){
$scope.nameSearchResults = data;
$(bar).slideUp();
});
}
}
$scope.selectName = function(pl){
$scope.nameModel = pl.name; //CHANGED BY ADDING $SCOPE AND ASSIGNING THE VALUE
$scope.idModel = pl.user_id; //CHANGED BY ADDING $SCOPE AND ASSIGNING THE VALUE
$scope.nameSearchResults = {};
}
}
};
My HTML changed (inModel to id-model and nameModel to name-model):
<name-user id-model="request.requesterID" name-model="request.requester"></name-user>
Thanks again for the help.