Updating ng-model when value is changed from a file select directive

Question

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>

Hello if anyone come across this problem i solved it by replacing jquery ($) with document.getElementById() and it worked. For some reason jquery was not working for me. Ill have to look into why. — inhaler, Mar 07 '17 at 23:19

digit · Answer 1 · 2017-03-07T23:47:46.717

Directives have access to the parent scope by default in AngularJS applications. You can try set the parent scope by using $parent and also the parent scope must be an object rather than single naming scope. You cannot naming the variable directly such as scope.parentModel = newName because it's primitive type (i.e., a string, number, or boolean type) and the "write" always goes to the local scope/object. Any writes to the object properties (whether from the parent or the child) will go to that one object.

angular.module('app')
.directive('customOnChange', function() {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var onChangeHandler = function () {
                 scope.$eval(attrs.customOnChange);
                 scope.$parent.obj.parentModel = 'newVal';
            }
            element.bind('change', onChangeHandler());
        }
    };
});

Updating ng-model when value is changed from a file select directive

1 Answers1