在同一表单上使用我的自定义Angular JS指令的多个实例

Question

我尽力解决此问题，但无法解决。

我在同一页面上使用指令的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>

Answer 1

不会提供直接的代码解决方案-不过，我会为您指出正确的方向。

从评论继续，我猜您的问题来自jQuery选择器- $('#lovPopup')和$("#lovGrid") ，它们选择DOM中的第一个。 请注意，第一个输入下方的弹出窗口是如何显示的？ 检查HTML后，无论您双击哪个输入字段，都可以看到第二个表单始终处于隐藏状态，这是由于jQuery选择器无效而导致的。

我更新了您的插件，以摆脱基本上所有的jQuery，并使用ng-show来显示和隐藏模式。 我将正确处理剑道网格留给您。 这是有关如何在angular中使用kendo-ui的示例。

更新的插件： http ://plnkr.co/edit/3FhBL2ZtkxHOO6EJ3gKF?p=preview