javascript - Angular Js 指令通信检测范围内是否有另一个指令

标签 javascript angularjs using-directives dataservice

我知道有一种方法可以使指令相互通信。您可以通过使用 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 指令,该指令可以选择需要 (?^) dropzonefilechange.

如果您选择此路线,这里有一些讨论这种情况下的沟通的内容: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/

相关文章:

javascript - Angularjs ng-grid更改页面但丢失了selectedItems

c# - 组织 using 指令,重新运行测试?

C++11 `using` 关键字 : specialize template alias of template parameter

javascript - 如果值为 true 则追加数据

javascript - Android手机打开网页时如何播放 'notification'的声音?

javascript - 改进这个: Change button text/background onmousedown - revert onmouseup

javascript - 模糊事件不会在 IE7 和 IE6 中触发

javascript - angularjs 中有多少种限制可用

AngularJS - 无法使用 ngRepeat orderBy 对 DateTime 进行排序

c++ - 为什么 C+ +'s "using namespace"以这种方式工作?