Angularjs directive creation

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.

one issue is that directives are funny about naming conventions - so like you have the isolate scope variables `idModel` and `nameModel` - when you use em in your implementation - they should be `` The other problem that I see is that the `=` denotes two-way binding so it expects an object - not a string as it appears you have - as a parameter. A jsfiddle could be useful here to help you further. — Kevin Friedheim, Oct 24 '15 at 00:02
In addition to what @Kevin Friedheim has mentioned, some other issues are the `require` key should be `scope` instead. Also, it should be `templateUrl` instead of `template`. — PSWai, Oct 24 '15 at 00:10
thank you I will try all your suggestions/corrections. @Kevin - yes, I am passing a string that my data is bound to...so that won't work? if I only want to update the particular field values of my entire object of data, how would I do that? (unless I totally misunderstand what you mean). My entire 'request' object has various roles that can be assigned in it, which are all strings. — user3861284, Oct 25 '15 at 16:14
I made the changes and most of it worked...now my problem is setting the values into the fields I passed in. Where I had: nameModel.$setViewValue(pl.name); idModel.$setViewValue(pl.user_id); I got an error: ReferenceError: nameModel is not defined....how do I set those values? — user3861284, Oct 25 '15 at 17:15
I think I figured it out! I changed these to: $scope.nameModel = pl.name and $scope.idModel = pl.user_id. I put two of these directives in my HTML and it seems to be properly setting the values in my model. Thank you both for your help....it seems it was mostly the issues you both pointed out. — user3861284, Oct 25 '15 at 18:56

score 0 · Answer 1 · answered Oct 25 '15 at 19:09

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.

Angularjs directive creation

1 Answers1