I have a custom directive that detects when an input of type file has changed. When this happens I want to find another input and change its ng-model
. I can't seem to get the model change to be triggered. I have done research and can't find an answer. This is the question I referenced here
//my controller
$scope.headShotUpload = function (event) {
var path = '',
id = event.target.id.toString(),
files = event.target.files,
tempString = '';
if(id.includes('nfl')){
path = $scope.filePaths.headShot.nfl +'/'+ files[0].name;
tempString = id.replace("nfl-","");
var labelInputId = tempString+'-path'
var input = $(labelInputId);
input.val(path);
input.trigger('input');
}
};
//my directive
angular.module('app')
.directive('customOnChange', function() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var onChangeHandler = scope.$eval(attrs.customOnChange);
element.bind('change', onChangeHandler);
}
};
});
<td class="rcs-table-btn">
<span >
<label class="btn btn-default btn-file btn-rcsorange" >NFL<input type="file" style="display: none;" id="offense-top-header1-headshot-nfl-1" custom-on-change="headShotUpload"></label>
</span>
<span>
<label class="btn btn-default btn-file btn-rcsorange" >NCAA <input type="file" style="display: none;" id="offense-top-header1-headshot-ncaa-1" custom-on-change="headShotUpload"></label>
</span>
</td>
<td class="rcs-table-input">
<input type="text" class="rcs-input-table" id="offense-top-header1-headshot-1-path" placeholder="(path)" ng-model="page.offense.list[player.position].header1[0].headShot">
</td>