我无法以编程方式检测angularjs中的值变化

Question

我在angularjs非常新，我遇到了麻烦 我有这样的 html ：

<section class="content" ng-app="offer">
    <div ng-controller="OfferController">
    ...
    <input name="Attachment" type="file" class="file_up" onchange="angular.element(this).scope().change(this)" ng-model="Attachment" />
    <span>{{Attachment}}</span> //i can't get it
    ...
    </div>
</section>

和脚本：

var myApp = angular.module('offer', []);

myApp.controller('OfferController', ['$scope', function ($scope) {
    $scope.change = function (element) {
        if (element.files.length > 0) {
            $scope.Attachment = element.files[0].name;
        }
        else {
            $scope.Attachment = "";
        }
        console.log($scope.Attachment); // I can get changed value in console
    }
}]);

图片：

我可以在控制台中获取更改的值，但是当输入的值更改时， 无法进入html端。非常感谢您提前寻求帮助。

Answer 1

由于您从Angular的摘要周期之外更改模型，您必须手动通知框架它必须再次运行观察者。您可以使用$scope.$apply()：

$scope.change = function (element) {
    if (element.files.length > 0) {
        $scope.Attachment = element.files[0].name;
    }
    else {
        $scope.Attachment = "";
    }
    $scope.$apply();
}

或者更简洁：

$scope.change = function(element) {
    $scope.$apply(function() {
        $scope.Attachment = element.files.length ? element.files[0].name : '';
    });
}

演示：http://plnkr.co/edit/6quQlHJIvdD3QwtOhHrB?p=preview

Answer 2

编辑：正如@dfsq在评论中指出的那样，ng-change开箱即可进行文件输入，所以我编辑了包含替代解决方案的代替

您可以编写自定义指令来自己处理文件输入，并使其更新ng-model中的属性绑定（仅限单向）。

.directive('input', function () {
  return {
    restrict: 'E',
    require: '?ngModel',
    link: function(scope, element, attr, ctrl) {
      if (!ctrl || attr.type !== 'file') {
        return;
      }

      var listener = function() {
        var file = element[0].files[0];
        var value = file && file.name;

        if (ctrl.$viewValue !== value) {
          scope.$apply(function() {
            ctrl.$setViewValue(value); // update ng-model
          });
        }
      };

      element.on('change', listener);
    }
  }
})

这样，当用户选择文件时，不需要onchange或ng-change，文件名应立即设置为ng-model中的属性。

<input type="file" name="Attachment" ng-model="Attachment" ng-change="change()" />
<span>{{ Attachment }}</span>

示例Plunker：http://plnkr.co/edit/K3ZLoqNUPbo991b9ooq3?p=preview

原始回答：（这不适用于输入类型=＆＃34;文件＆＃34;）

而不是onchange，您应该使用ng-change代替。

尝试更改此内容：

onchange="angular.element(this).scope().change(this)"

对此：

ng-change="change($event.target)"

希望这有帮助。