1

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

4

3 回答 3

0

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

于 2013-10-15T16:17:00.100 回答
0

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

试试这个：

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

    var directives = [];

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

        return this;

    }

   }

});
于 2013-10-15T16:23:46.240 回答
0

看到您需要一个进度条，一个选项可能是创建一个单独的 progressBar 指令，该指令可选地需要 ( ?^)dropzone和filechange.

如果你走这条路，这里讨论一下这种情况下的通信：AngularJS 指令控制器需要父指令控制器？

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

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

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

于 2013-10-15T16:41:40.400 回答