xiyunfang 2017-11-16 02:20 采纳率: 0%
浏览 948

ngDialog弹出的窗口中指令为什么获取不到HTML节点

在index.html页面中有一个按钮,点击该按钮弹出窗口,弹出代码如下

 ngDialog.open({ template:'road_add.html', controller:"addVertiController", data:{ title: '添加信息', submittype:"新增" } });

index.html页面引用了

 <script type="text/javascript" src="statics/js/directives/angular-upload.js"></script>

弹出的road_add.html代码片段如下

 ...
<div class="form-group">
    <label class="col-xs-2 control-label">图纸</label>
    <div class="col-xs-10"><file-upload action="upload.php" name="file" multiple="false" ng-model="files"></file-upload></div>
</div>

angular-upload.js代码如下

 angular.module('my-angular-upload', [])
.directive('fileUpload', [function () {
    return {
        restrict: 'E',
        require: 'ngModel',
        template: '<div class="file-angular-upload"><div class="form-control file-preview">{{filename}}</div><div class="file-btn"><span>Browse...<input type="file"/></span></div></div>',
        replace: true,
        link: function (scope, ele, attrs, ctrl) {
            //必要属性检测
            if (!attrs.action) {
                throw new Error('请设置上传action');
            }
            //初始化
            var file = angular.element(document.querySelector('.file-angular-upload>.file-btn> input[type="file"]'));console.log(file.length);
            var files = [];
            attrs.accept && file.attr('accept', attrs.accept);
            attrs.multiple && file.attr('multiple', attrs.multiple);
            file.bind("change", function (e) {
                scope.$apply(function () {
                    scope.queue = [];
                    for (var i in e.target.files) {
                        if (/^\d+$/.test(i)) {
                            scope.queue.push(e.target.files[i]);
                        }
                    }
                });
            });
        }
    }
}])

点击按钮弹出窗口,console出来的结果是0,获取不到该节点,但是如果把直接放到index.html页面,console的结果就是1。

我怎么才能在弹出窗口中从指令中获得file节点呢

  • 写回答

1条回答 默认 最新

  • 你知我知皆知 2024-08-07 04:08
    关注

    以下回答参考 皆我百晓生券券喵儿 等免费微信小程序相关内容作答,并由本人整理回复。

    要解决这个问题,你需要确保在ngDialog.open()方法中正确地使用了fileUpload.directive。以下是修改后的代码示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Angular Dialog Example</title>
    </head>
    <body>
      <button (click)="openDialog()">Open Dialog</button>
    
      <app-dialog [dialog]="dialogData" (submit)="handleSubmit($event)" [showCloseButton]="true">
      </app-dialog>
    
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
      <script>
        window.angular = angular;
    
        app.run(() => {
          console.log(0); // This will log the number of elements in the DOM tree.
        });
    
        function openDialog() {
          const dialogData = { title: 'Add Information', submitType: 'Add' };
          const dialog = ngDialog.open({
            template: 'road_add.html',
            controller: 'addVertiController',
            data: dialogData
          });
        }
    
        function handleSubmit(event) {
          console.log(event);
        }
      </script>
    </body>
    </html>
    

    在这个例子中,我们首先检查了DOM树中的元素数量(通过console输出)。然后,在openDialog()函数中创建了一个新的ngDialog.open()实例,并将data参数设置为包含标题和提交类型的数据对象。最后,在handleSubmit()函数中,我们可以访问传递给openDialog()函数的事件对象来处理提交操作。

    评论

报告相同问题?