我无法检测angularjs编程值的变化 [英] I can't detect programmatically value change in angularjs

问题描述

我在angularjs非常新，我遇到了麻烦，结果
我的 HTML 是这样的：

I'm very new at angularjs and I'm in trouble,
I have html like this:

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

图片：结果

image:

我可以在控制台中看到改变的价值，但我的不能获取HTML的一面，当输入的值的变化。非常感谢你提前为任何帮助。

I can get changed value in console but I can't get in html side when input's value change. Thank you so much in advance for any help.

推荐答案

自您角的消化周期外更改产品型号，你必须手动，它必须再次运行观察家告知框架。您可以使用 $ $范围适用于（）此：

Since you change model from outside Angular's digest cycle, you have to inform framework manually that it must run watchers again. You can use $scope.$apply() for this:

$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 : '';
    });
}

这篇关于我无法检测angularjs编程值的变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！