2015-07-13 86 views
0

定製角JS指令的多個實例,我試圖努力解決這個,但不能得到一個可能的解決方案。用我相同的形式

我使用的是相同的頁面上的指令2個實例來設置不同的值2個文本字段的值。但是當我選擇一個時,另一個也改變爲相同的值。因爲我來自一個很長一段時間在這個問題上卡住

任何見解,這將不勝感激。

我試圖ngModel隔離範圍,並且所有...

每當我改變一個值,另一個也被影響。

我砍一些我的代碼,並創建了一個[plunker] http://plnkr.co/edit/xwsrThvbVsIXPotRHc7o。但無法做到這一點。

我的模板

 <input class="form-control" id="lovdat" name="lov" ng-    dblclick="dblClick()" ng-keyup="keyUp($event)" ng-model="lovval.displayval" 
     type="text"> 

我的指令

var app = angular.module('plunker', ['LOVDirective']); 

app.controller('MainCtrl', function($scope) { 
$scope.officeMaster = { 

officeId: "", 
officeName: "", 
company: "", 
companyId: "", 
officeManager: "", 
officeManagerId: "", 
officeLocation: "", 
isactive: "" 

}; 
$scope.lovvalemp = { 
    displayval: "", 
    dataval: "" 
    } 
    $scope.lovvalcomp = { 
    displayval: "", 
    dataval: "" 
    } 
}); 

angular.module('LOVDirective', []) 
    .directive('Lov', [function() { 
    return { 
     scope: { 
     label: '@', // optional 
     changeCallback: '&', 
     lovval: '=info' 

     }, 
     restrict: 'EA', 

     replace: true, // optional 
     templateUrl: 'template.html', 


     link: function(scope, element, attr, ctrl) { 
     scope.param = { 
      "LOVType": attr.gacLovType, 
      "LOVSearchString": "", 
      "LOVSearchCriteria": "" 
     }; 

     scope.alertModalPopup = {}; 
     scope.alertModalPopup.selectedItem = ""; 



     scope.dblClick = function() { 
      selectdata(); 
     }; 



     scope.selectdata = function() { 
      // var entityGrid = $("#lovGrid").data("kendoGrid"); 

      scope.lovval.displayval = attr.gacLovType + "Sherry"; 
      scope.lovval.dataval = attr.gacLovType + "1"; 
      lovval = scope.lovval; 
      // lovval.ngModel = scope.lovval.dataval; 
      //ngModel.$setViewValue(scope.lovval); 
      // $("#lovdat").val = scope.lovval.displayval; 
      // $('#lovPopup').modal('hide'); 
     }; 





     } 

    }; 
    }]); 

我的index.html

<div class="form-group"> 
     <label class="control-label required" for="txthead">Manager</label> 
     <lov ng-model="officeMaster.officeManager" data-gac-lov-type="EMPLOV" info="lovvalemp"></lov> 
    </div> 
    <div class="form-group"> 
     <label class="control-label required" for="txtoffice">Company</label> 
     <lov ng-model="officeMaster.company" data-gac-lov-type="CMPLOV" info="lovvalcomp"></lov> 

    </div> 
+0

能不能介紹一下什麼是應該當你雙擊一個領域發生詳細點嗎?在修復一些語法錯誤後,對於我來說,雙擊管理員字段時會出現「EMPLOVSherry」,雙擊公司字段時會出現「CMPLOVSherry」。也就是說,我似乎無法在這裏重現您的問題。 http://plnkr.co/edit/lYkv2sK2pYNTPvQPPeNZ?p=preview – Fissio

+0

謝謝Fissio。欣賞快速反應。恐怕我無法看到更新的Plunker。我打算做的是兩個輸入應該有不同的價值,應該更新模型,以及用不同的價值...雙clickeing應該作出這樣的CMPLOVSherry和其他應使第二個EMPLOVSherry – GeoCoder

+0

這幾乎是發生了什麼事在我連接的蹦牀。你或其他人能否嘗試再次打開它,看看它是否是你需要的?對我很好,不知道有什麼問題:/ – Fissio

回答

0

不會提供直線上升代碼解決方案 - 我會爲你指明正確的方向,但。

繼續評論,我猜你的問題來自jQuery選擇器 - $('#lovPopup')$("#lovGrid")這是選擇DOM中的第一個。注意彈出窗口是如何顯示在第一個輸入下面的彈出窗口?在檢查HTML時,您可以看到第二種形式總是隱藏的,無論哪個輸入字段是雙擊的,這是無效的jQuery選擇器的結果。

我更新了plunker擺脫基本上所有的jQuery和使用ng-show顯示和隱藏的模式。我會正確處理劍道給你。下面是一個example on how to use kendo-ui in angular.

更新plunker:http://plnkr.co/edit/3FhBL2ZtkxHOO6EJ3gKF?p=preview

+1

非常感謝Fissio。拯救了我的生活......更好地完成整個JavaScript角度的方式。解決了它。 :) – GeoCoder

相關問題