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

时间:2017-03-07 22:38:13

标签: javascript jquery angularjs

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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

默认情况下,AngularJS应用程序中的指令可以访问父作用域。您可以尝试使用$ parent设置父作用域,并且父作用域必须是对象而不是单个命名作用域。您无法直接命名变量,例如scope.parentModel = newName,因为它是基本类型(即字符串,数字或布尔类型),“write”始终转到本地范围/对象。对对象属性的任何写入(无论是来自父对象还是子对象)都将转到该对象。

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