Question

我有一组两个函数，我用它来执行查找以识别用户。在我的应用程序中，我需要为多个角色（即请求者，处理器等）执行此操作。我想我想创建一个指令，这样我就可以重用代码，而不必为每个角色复制和更改它 - 如果我理解了指令的概念。

我做了一次尝试，但实际上是出现输入字段而不是输入字段，我看到了模板html文件的名称。我显然做错了什么，但由于我对指令（自定义和创建它们）非常新，我相信我做得不对。

我想要的是能够输入一个人的名字，当我输入时，它应该调用一个正在进行实际搜索的功能。在寻找匹配时，我想要一个滑动条来显示正在发生的事情。在我选择合适的用户之后，我希望检索到的名称和ID存储在我的模型中，并且该栏将关闭。

这是我在HTML中调用我的指令：

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

requestterId和requester是我想要的结果....

我的指示：

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>

目前，每次我需要一个角色的不同用户ID /名称时，我必须复制这些功能并更改名称和条形码...我真的认为必须有一种方法来实现这一点我可以多次调用它，只需传入我想要的模型值。虽然上面的代码没有给我任何错误，但它没有为我提供输入字段和功能来执行查找....请帮忙。

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为id-model，nameModel为name-model）：

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

再次感谢您的帮助。

Angularjs指令创建

1 个答案: