I've been struggling to find a solution for this particular issue.
On my webpage, I have two instances of a directive that are supposed to set values for two different text fields. However, when I select one value, the other field automatically changes to the same value.
I would greatly appreciate any insights or suggestions to help me resolve this problem as I've been stuck on it for quite some time now.
I've attempted using ngModel Isolate scope and other methods but haven't been successful so far.
Every time I change one value, it impacts the other field as well.
To provide more context, I've created a demo on [Plunker] http://plnkr.co/edit/xwsrThvbVsIXPotRHc7o, although I couldn't get that to work either.
Below is a snippet from my template:
<input class="form-control" id="lovdat" name="lov" ng-dblclick="dblClick()" ng-keyup="keyUp($event)" ng-model="lovval.displayval"
type="text">
And here is the code from 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: '@',
changeCallback: '&',
lovval: '=info'
},
restrict: 'EA',
replace: true,
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() {
scope.lovval.displayval = attr.gacLovType + "Sherry";
scope.lovval.dataval = attr.gacLovType + "1";
lovval = scope.lovval;
};
}
};
}]);
Finally, in my Index.html file:
<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>