Angularjs指令創建

我有一套兩個功能，我用戶執行查找來識別用戶。在我的應用程序中，我需要爲多個角色（即：請求者，處理器等）執行此操作。我想我要創建一個指令，以便我可以重用代碼，而不必爲每個角色複製和更改它 - 如果我理解指令的概念。Angularjs指令創建

我做了一個嘗試，而不是實際顯示爲我輸入名稱的輸入字段，我看到模板html文件的名稱。我顯然做錯了，但由於我對指令很陌生（定製和創建它們），我相信我沒有做對。

我想要的是能夠輸入一個人的姓名，而當我輸入時，它應該調用一個正在進行實際搜索的函數。在尋找比賽時，我想要一個滑動條出現以指示正在發生的事情。選擇合適的用戶後，我希望檢索到的名稱和ID存儲在我的模型中，並且該欄將關閉。

這就是我把我的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>

目前，每次我需要一個不同的用戶ID /名稱的角色，我必須複製功能和更改名稱和小節號。 ..我真的認爲必須有一種方法來做到這一點，所以我可以多次調用它並傳入我想要的模型值。雖然上面的代碼不會給我任何錯誤，但它不提供輸入字段和功能來執行查找....請幫助。

來源

2015-10-23 user3861284

一個問題是，有關命名約定的指令很有趣 - 就像你有隔離作用域變量'idModel'和'nameModel' - 當你在你的實現中使用em時 - 它們應該是''我看到的另一個問題是'='表示雙向綁定，因此它期望一個對象 - 不是像你看到的那樣是一個字符串 - 作爲一個參數。一個jsfiddle可以在這裏幫助你進一步。 –

除了@Kevin Friedheim提到的之外，其他一些問題是'require'鍵應該是'scope'。此外，它應該是'templateUrl'而不是'template'。 – PSWai

謝謝我會嘗試所有建議/更正。 @凱文 - 是的，我傳遞一個字符串，我的數據是綁定的...所以這將無法正常工作？如果我只想更新整個數據對象的特定字段值，我該怎麼做？（除非我完全誤解你的意思）。我的整個「請求」對象具有可以在其中分配的各種角色，這些角色都是字符串。 – user3861284

我不得不根據指出的問題稍微改變我的指示，加上我在做出這些更改後發現的問題。我需要修改我的指令並更改我的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模型和nameModel命名模型）：再次

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

感謝您的幫助。

來源

2015-10-25 19:09:19 user3861284

Angularjs指令創建

回答

相關問題