自定义指令注入在angularJs中不起作用

时间:2015-09-14 12:22:13

标签: angularjs

我已经为frag和drop文件上传完成了自定义指令并将其放在模块上,但是它没有按预期工作。它在控制台和复制中也显示错误。

Error Description from console 任何人都可以告诉我哪里出错了吗?

<html>

<head>
  <title>Angular Js Page</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<style>

div[dropzone] {
    border: 2px dashed #bbb;
    border-radius: 5px;
    padding: 25px;
    text-align: center;
    font: 20pt bold;
    color: #bbb;
    margin-bottom: 20px;
}

</style>
</head>

<body ng-app="Myapp">

<div dropzone>Drop Files Here</div>

<script type="text/javascript">

    var app = angular.module("Myapp", ['dropzone']);

    app.directive("dropzone", function() {
    return {
        restrict : "A",
        link: function (scope, elem) {
            elem.bind('drop', function(evt) {
                evt.stopPropagation();
                evt.preventDefault();

                var files = evt.dataTransfer.files;
                for (var i = 0, f; f = files[i]; i++) {
                    var reader = new FileReader();
                    reader.readAsArrayBuffer(f);

                    reader.onload = (function(theFile) {
                        return function(e) {
                            var newFile = { name : theFile.name,
                                type : theFile.type,
                                size : theFile.size,
                                lastModifiedDate : theFile.lastModifiedDate
                            }

                            scope.addfile(newFile);
                        };
                    })(f);
                }
            });
        }
    }
});

  </script>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

dropzone不是一个不同的模块。您无法将其注入Myapp模块。

这是一个生活在myApp中的指令。您需要阅读有关角度指令和模块的更多信息

变化

var app = angular.module("Myapp", ['dropzone']);

var app = angular.module("Myapp");

它可能会起作用