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

【问题标题】：Angular Js Directive communication detecting if another directive is on in the scopeAngular Js指令通信检测范围内是否有另一个指令
【发布时间】：2013-10-15 16:09:43
【问题描述】：

我知道有一种方法可以让指令相互通信。您可以通过使用控制器来做到这一点。我的问题是我在创建上传应用程序的页面上有 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 或 file change 指令，或者两者都被使用，来执行下一组代码。

【问题讨论】：

标签： javascript angularjs using-directives dataservice

【解决方案1】：

看到您需要一个进度条，一种选择可能是创建一个单独的progressBar 指令，该指令可选地需要（?^）dropzone 和filechange。

如果你走这条路，这里有一些讨论这种情况下的沟通：AngularJS directive controllers requiring parent directive controllers?

以及多个要求：https://groups.google.com/forum/#!msg/angular/PZLxEKZUy5k/M1_JKF84-MEJ

如果在您的架构中有意义的话，这可以为您提供一些很好的职责分离。

如果你还没有，你也可以看看这个不能解决你的问题的实现，但在 progressBar 指令中可能很有用：http://victorbjelkholm.github.io/ngProgress/

【讨论】：

【解决方案2】：

我认为这是因为您没有在任何地方实例化指令数组 - 当您从服务调用它时，它会返回一个空数组并将您的指令插入其中。

试试这个：

    var app = angular.module("uploader", []);
    app.factory('data', function(){

    var directives = [];

    return {
    directives: function() {
        return directives;
    },
    progressBarSet:false,
    getData:function(){

        return this;

    }

   }

});

【讨论】：

我会试试看它是否有效。我的“filechange”指令正在注册，但“dropzone”指令没有。我不确定为什么会这样，但是当您在网络检查器中深入研究时，当您尝试引用它时，它们都在 var 中注册，那么它不是吗？这是范围问题吗？

【解决方案3】：

使用“require”属性。如果您说一个指令“需要”另一个指令，那么第一个指令将无法在没有另一个指令的情况下工作。

【讨论】：

我需要它们彼此独立工作，我试图使其尽可能模块化。检测的原因是我需要添加一个进度条，但如果我不添加，则将其限制为一个，然后我将在页面上有多个。所以基本上，如果一个指令存在，请检查页面上是否也存在另一个指令，因此只有一个进度条应用于页面。
我还尝试将 $scope.directives 附加到控制器，但由于某种原因，当您记录显示长度为 1 的变量时，它也不起作用
我认为这可能是指令的问题，我尝试更改文件更改数据 var 正在注册的变量，但 dropzone 没有，这可能是一个序列问题，比如变量没有被设置我尝试参考的时候呢？我注销了“数据”服务“文件更改存在但 dropzone 不存在”