Using multiple instances of my custom Angular JS Directive on the same form

Question

I tried hard to solve this but couldn't get a possible solution.

I am using 2 instances of a directive on the same page to set value of 2 text fields with different values. but when i select one the other also changes to the same value.

Any insights into this will be appreciated as I am stuck from a long time on this issue.

I tried ngModel Isolate scope and all...

whenever I change one value the other also gets affected.

I cut few of my code and created a [plunker] http://plnkr.co/edit/xwsrThvbVsIXPotRHc7o. But cant happen to make that work as well.

My Template

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

My Directive

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');
        };





      }

    };
  }]);

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

Can you elaborate on what's supposed to happen when you double click a field? For me after fixing some syntax errors "EMPLOVSherry" appears when double clicking in the manager field, and "CMPLOVSherry" appears when double clicking the company field. That is to say, I can't seem to reproduce your problem here. plnkr.co/edit/lYkv2sK2pYNTPvQPPeNZ?p=preview — Fissio
– Fissio, Commented Jul 13, 2015 at 7:34
Thanks Fissio. Appreciate the quick response. I'm afraid i'm not able to see the updated Plunker. What I intend to do is both the inputs should have different value and should update the model as well with different value... double clickeing one should make that CMPLOVSherry and the other should make the second one EMPLOVSherry — GeoCoder
– GeoCoder, Commented Jul 13, 2015 at 7:38
That's pretty much what's happening in the plunker I linked. Can you or someone else try and open it again to see if it's what you needed? Working fine for me, dunno what the issue there is :/ — Fissio
– Fissio, Commented Jul 13, 2015 at 7:42
This is working fine... Let me try to replicate the issue by adding some more code that i require. I basically need to open a popup and select from a list. — GeoCoder
– GeoCoder, Commented Jul 13, 2015 at 7:50
Fissio, I added more functionality to the plunker plnkr.co/edit/H02qy92KM48lQjgUave4?p=preview Please check it to see whats wrong. Basically the popuo shows a grid of 2 values and when one is selected the corresponding field needs to be updated. but both gets updated. — GeoCoder
– GeoCoder, Commented Jul 13, 2015 at 8:07

Fissio · Accepted Answer · 2015-07-13 11:04:12Z

1

Not going to provide a straight up code solution - I'll point you in the right direction, though.

Continuing from the comments, I'm guessing your problem comes from the jQuery selectors - $('#lovPopup') and $("#lovGrid") which are selecting the first ones in DOM. Notice how the popup that shows up is the one beneath the first input? Upon inspecting the HTML, you can see that the second form is always hidden, no matter which input field you've doubleclicked, which is a result of invalid jQuery selectors.

I updated your plunker to get rid of basically all jQuery and to use ng-show to show and hide the modal. I'll leave correctly handling the kendo-grid to you. Here's an example on how to use kendo-ui in angular.

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

answered Jul 13, 2015 at 11:04

Fissio

3,75818 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

GeoCoder Over a year ago

Thanks a lot Fissio. Saved my life... better to do entire javascript the angular way. Solved it. :)

Collectives™ on Stack Overflow

Using multiple instances of my custom Angular JS Directive on the same form

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related