我知道有一种方法可以使指令相互通信。您可以通过使用 Controller 来做到这一点。我的问题是我正在创建上传应用程序的页面上有 2 个指令,我正在使用一个文件更改指令来检测文件输入是否已用于选择文件,以及一个创建用于拖放的拖放区的指令文件都在工作。
但是如何让应用程序检测页面上是否使用了 dropzone 或 filechange 指令我创建了一个工厂方法,并使用带有数组的数据服务将指令的名称插入数组中。但是当它出现时,即使两者都在页面上,只有一个正在注册?我该如何解决?这是一个异步问题吗?
这是我的 uploader3.js
var app = angular.module("uploader", []);
app.factory('data', function(){
return {
directives:[],
progressBarSet:false,
getData:function(){
return this;
}
}
});
app.directive("dropzone", ["data", function (data) {
return {
restrict: "A",
controller: function($scope){
},
priority: 0,
link: function (scope, element, attr, ctrl) {
data.directives.push("dropzone");
console.log(data.directives);
}
}
}]);
app.directive("filechange", ["data", function (data) {
return {
restrict: "A",
controller: function($scope){
},
priority: 1,
link: function (scope, element, attr, ctrl) {
data.directives.push("filechange");
console.log(data.directives);
}
}
}]);
这是我的 html。
<!doctype html>
<html ng-app="uploader">
<script src="Scripts/angular.min.js"></script>
<script src="app/uploader3.js"></script>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body dropzone>
<input type="file" name="FILEDATA" id="FILEDATA" accept="image/jpg, image/jpeg" filechange>
</body>
</html>
当我记录 data.directives 时,它显示它的长度为 1?如何应用推送并获取这两个指令以在我的数据服务中注册?
是否有更好的方法来确定页面上实际应用了哪些指令? 我需要根据页面上是否已实现 dropzone 或文件更改指令,或者两者是否都在使用来执行下一组代码。
最佳答案
看到您需要一个进度条,一种选择可能是创建一个单独的 ProgressBar 指令,该指令可以选择需要 (?^
) dropzone
和 filechange
.
如果您选择此路线,这里有一些讨论这种情况下的沟通的内容:AngularJS directive controllers requiring parent directive controllers?
并且在多个要求上:https://groups.google.com/forum/#!msg/angular/PZLxEKZUy5k/M1_JKF84-MEJ
如果在您的架构中有意义的话,这可以为您提供一些很好的职责分离。
如果您还没有,您也可以查看这个实现,它不能解决您的问题,但在进度条指令中可能有用: http://victorbjelkholm.github.io/ngProgress/
关于javascript - Angular Js 指令通信检测范围内是否有另一个指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19385989/