Создание директивы Angularjs

Question

У меня есть набор из двух функций, которые я должен выполнить для поиска пользователя. В моем приложении мне нужно сделать это для нескольких ролей (например, реквестер, процессор и т. Д.). Я думаю, что хочу создать директиву, чтобы я мог повторно использовать код, не копируя и не изменяя его для каждой роли - если я понимаю концепцию директивы.

Я сделал попытку, но вместо поля ввода, фактически отображающего для меня имя, я вижу имя файла шаблона html. Я, очевидно, что-то делаю неправильно, но поскольку я очень новичок в директивах (обычай и создаю их), я уверен, что не сделал это правильно.

Что я хочу - это возможность вводить имя человека, а при вводе он должен вызывать функцию, выполняющую фактический поиск. В то время как матч ищет, я хочу, чтобы скользящая панель появлялась, чтобы показать, что что-то происходит. После того, как я выберу подходящего пользователя, я хочу, чтобы имя и идентификатор были сохранены в моей модели, и панель закрывается.

Это то, что я положил в моем HTML, чтобы назвать мою директиву:

<name-user idModel="request.requesterID" nameModel="request.requester"></name-user> 

requesterId и запрашивающая находятся там, где я хочу, чтобы результаты ....

Моя директива:

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 = {}; 
     } 

    } 
}; 

});

Мой шаблон имеет:

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

В настоящее время, каждый раз, когда я нужен другой идентификатор пользователя/имя для роли, я должен скопировать функции и изменять имена и номер бара. .. Я действительно думаю, что должен быть способ сделать это, поэтому я могу назвать его несколько раз и просто передать в значениях модели, которые я хочу. Хотя код выше не дает мне никаких ошибок, он не дает мне поля ввода и функциональности для выполнения поиска .... пожалуйста, помогите.

Answer 1

Мне пришлось немного изменить мою директиву в соответствии с указанными вопросами, плюс тот, который я выяснил после того, как эти изменения были сделаны. Мне нужны были изменения в моей директиве и изменение моего HTML-кода, поэтому я опубликую окончательные версии, которые, кажется, работают.

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 = {}; 
    } 

    } 
}; 

Мой HTML изменился (inModel к ид-модели и nameModel на имя-модели):

<name-user id-model="request.requesterID" name-model="request.requester"></name-user> 

Еще раз спасибо за помощь.