Question

我知道有一种方法可以让指令相互通信。您可以通过使用控制器来完成。我的问题是我在页面上有2个指令我正在创建一个上传应用程序，我使用的是一个文件更改指令，用于检测文件输入是否已用于选择文件和指令，该指令为拖放创建了一个dropzone文件都有效。

但是如何让应用程序检测是否在我创建工厂方法的页面上使用了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指令，或者是否正在使用它们来执行下一组代码。

Answer 1

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

Answer 2

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

试试这个：

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

    var directives = [];

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

        return this;

    }

   }

});

Answer 3

看到您需要一个进度条，一个选项可能是创建一个单独的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/

Angular Js指令通信检测范围内是否有其他指令

3 个答案: