我无法以编程方式检测 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

原答案：（这不适用于 input type="file"）

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

尝试改变这个：

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

到这里：

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

希望这会有所帮助。