AngularJS - 使用ng-repeat和jQuery上传和显示图像

我试图在ng-repeat内部上传和显示图像。AngularJS - 使用ng-repeat和jQuery上传和显示图像

我已经成功使用jQuery功能上传和显示图像不NG-重复：

<html> 
<head> 
     <script src="jquery.js" type="text/javascript"></script> 
</head> 
<body> 
<input type='file' /> 
<img id="myImg" ng-src="#" alt="your image" style="width:50px;height:50px"/> 
</body> 
</html> 
... 
<script> 
$(function() { 
    $(":file").change(function() { 
     if (this.files && this.files[0]) { 
      var reader = new FileReader(); 
      reader.onload = imageIsLoaded; 
      reader.readAsDataURL(this.files[0]); 
     } 
    }); 
}); 

function imageIsLoaded(e) { 
    $('#myImg').attr('src', e.target.result); 
}; 
</script>

如果我改变的代码在里面NG-重复，jQuery函数dosent工作：

<div ng-repeat="step in stepsModel"> 
<input type='file' /> 
<img id="myImg" ng-src="#" alt="your image" style="width:50px;height:50px"/> 
/div>

2个问题：

如何更改jQuery的功能角度的功能？
我如何使ng-reapeat处理jquery函数？

非常感谢

来源

2014-10-08 Oron Ben-David

您必须提供一些代码和html ... – 2014-10-08 10:51:11

嗨，感谢您的更新，代码提供:) – 2014-10-08 11:13:11

您的代码在许多方面“略有”问题。看起来你是AngularJS的新手 - 所以，欢迎。

引用您的代码时，它看起来像stepsModel是一个相对于您当前的$ scope的变量。当$ scope.sepsModel更新，角的数据绑定会负责，并保持你的HTML与新数据更新： https://docs.angularjs.org/tutorial/step_04

至于你的问题，你目标应该是将图像添加到$ scope.stepsModel上传后。 $ scope.stepsModel将自动在HTML中与所有上传的图像进行概述。

以某种方式使用jQuery达到您的目的是不必要的。只要你能学得更好，为良好的精神状态我做了它应该怎么做的建议，用心灵的你自己的状态：

http://jsfiddle.net/kkhxsgLu/2/

$scope.imageUpload = function(element){ 
    var reader = new FileReader(); 
    reader.onload = $scope.imageIsLoaded; 
    reader.readAsDataURL(element.files[0]); 
} 

$scope.imageIsLoaded = function(e){ 
    $scope.$apply(function() { 
     $scope.stepsModel.push(e.target.result); 
    }); 
}

好运。

来源

2014-10-08 22:33:14

嗨加仑，谢谢！很棒的解决:) – 2014-10-09 07:32:25

我想你需要创建一个服务（见this），把你的jQuery代码到该服务。对于第二个问题，我问你，让我们看看代码。

来源

2014-10-08 10:56:03

嗨，感谢您的更新，仍然在寻找解决方案。 – 2014-10-08 15:04:35

AngularJS - 使用ng-repeat和jQuery上传和显示图像

回答

相关问题