Question

我想在我的电子商店管理员面板中添加“编辑产品”功能。我使用laravel作为后端和角度作为前面。但对于文件上传功能我使用Jquery。此按钮onclick从服务器加载所有产品并将其传递到产品数组中：

<button ng-click="controlPanel.showChangeItems()" class="btn btn-default">
        Change
</button>

并将其添加到页面

<div ng-class="{ 'hide' : controlPanel.state != 'changeItem'}">
        <div class="products" ng-repeat="product in products">
        ...
        {{Form::open(['url'=>'postUpload', 'files'=>true, 'class'=>'uploadImageForm'])}}
                    {{Form::file('photo')}}
                    <div class="wait wait-photo"><i class="fa fa-spinner fa-pulse"></i> Please, wait...</div>
                    {{Form::submit('Upload', ['class'=>'btn btn-default'])}}
                    <span class="uploadSuccess" style="color:green"></span>
        {{Form::close()}}
</div>

当我手动添加时，此表单效果很好。但是在动态时不起作用。这是我的jquery代码：

$('.uploadImageForm').on('submit',function(e) {
    e.preventDefault();
    $('.wait-photo').show();
    $('.upload-photo').hide();
    $.ajax({
      url: $(this).attr('action'),
      data: new FormData(this),
      type: 'POST',
      processData: false,
      contentType: false,
      success: function(output) {
        $('.photo').val(output);
        $('.uploadSuccess').text('Success!');
        $('.wait-photo').hide();
        $('.upload-photo').show();
      },
      error: function(output) {
        alert('Error! Try again later');
      }
    });

使用服务器端一切正常，因为当我手动放置表单时，所有工作都很完美。

Answer 1

使用jQuery访问角度DOM会是件坏事。

在指令中编写代码以更好地控制DOM

<强> HTML

<form name="something" form-directive>
  Inner Content
</form>

<强> CODE

app.directive('formDirective', function($http) {
    return {
        restrict: 'AE',
        link: function(scope, element, attrs) {
            element.on('submit', function(e) {
                e.preventDefault();
                angular.element('.wait-photo').show();
                angular.element('.upload-photo').hide();
                $http.post(element.attr('action'), new FormData(this), {
                    processData: false,
                    contentType: false
                }).then(function(output) {
                    angular.element('.photo').val(output);
                    angular.element('.uploadSuccess').text('Success!');
                    angular.element('.wait-photo').hide();
                    angular.element('.upload-photo').show();
                }, function(output) {
                    alert('Error! Try again later');
                });
            });
        }
    }
});

希望这可以提供帮助。感谢。

Jquery不使用angularjs动态创建的数据

1 个答案: