In my current project, I have a specific situation where there are multiple text-boxes and when any of them is clicked, the corresponding ng-model should be displayed in the browser console. To achieve this functionality, I came up with the following AngularJS code:
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.0/angular.min.js"></script>
<script>
var app = angular.module("myApp", [])
app.controller("myAppCtrl", function($scope){
$scope.modelName = '';
});
app.directive("myDirective", function(){
return{
restrict: "A",
link: function(scope, elem, attrs){
scope.customFunc1 = function(){
console.log(attrs.ngModel);
scope.modelName = attrs.ngModel;
};
}
}
});
</script>
</head>
<body>
<div>
<input name="tb_1" type="text" ng-model="tb_1" ng-mousedown="customFunc1()" my-directive>
</div>
<div>
<input name="tb_2" type="text" ng-model="tb_2" ng-mousedown="customFunc1()" my-directive>
</div>
<div>
<input name="tb_3" type="text" ng-model="tb_3" ng-mousedown="customFunc1()" my-directive>
</div>
</body>
</html>
I'm facing two challenges that I need help with: 1) Whenever I click on any text-box, the ng-model of the third text-box is shown, regardless of which one I actually clicked. Can someone suggest a solution to this issue?
2) Are there alternative methods or best practices for achieving the desired functionality described above? Your insights would be greatly appreciated.