javascript - Controller 的属性不动态改变

Question

   .controller('ImageChangeController', function($scope, $http, $element){
        $scope.itemid = '';

        reader = new FileReader();
        file_inputs = $element.children('.img-change');
        img_doc = $element.children('img').get(0);

        file_inputs.change(function(e){
            reader.onload = function(e) {
                img_doc.src = e.target.result;
            }
            $scope.itemid = "999"; //does not work

        });

      $scope.change_name = function(){
         $scope.itemid = "999";
      }

这是我的模板代码:

    <div  ng-controller="ImageChangeController">
    <span>{{itemid}}</span>
    <input type="file" class="img-change" name="{{itemid}}"  accept="image/*">
    </div>

如果我通过 ng-click="change_itemid()" 更改 itemid，它将运行良好。

Answer 1

基本上，您应该使用 Angular Directive(指令)而不是非原生元素: http://ngmodules.org/modules/ng-file-upload

如果您想在不更改实现的情况下解决问题(例如，指令没有提供您想要的功能):

问题根源在于这部分代码:

    file_inputs.change(function(e){
        reader.onload = function(e) {
            img_doc.src = e.target.result;
        }
        $scope.itemid = "999"; //does not work

    });

该函数在 Angular 摘要循环之外调用。您应该通知 Angular 有关更改的信息:

    file_inputs.change(function(e){
        reader.onload = function(e) {
            img_doc.src = e.target.result;
            $scope.$applyAsync();
        }
        $scope.itemid = "999"; //does not work
        $scope.$applyAsync();
    });