Angular Js Directive communication detecting if another directive is on in the scope

Question

I know there is a way to make directives communicate with each other. You can do it through using controllers. My problem is I have 2 directives on the page I am creating a upload app, I am using a file change directive that detects whether or not a file input has been used to select a file and a directive that creates a dropzone for dragging and dropping files both are working.

But how do I make the app detect whether the dropzone or filechange directive are being used on the page I created a factory method and am using a a data service with an array to push the names of the directives into the array. but when it does even though both are on the page only one is registering? how do I fix this? is it an async issue?

here is my 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);
    }

  }

}]);

here is my 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>

When I log the the data.directives it shows that I it has a length of 1? how do I apply the push and get both of the directives to register in my data service?

Is there a better way to figure out what directives are actually being applied on the page? I need to execute the next set of code based on whether or not the dropzone or file change directive has been implemented on the page, or if both are being used.

ValPar · Answer 1 · 2013-10-16T09:55:06.640

0

Use the "require" attribute. If you say that a directive "requires" another one, the first one won't be able to work without the other one.

edited Oct 16 '13 at 09:55

answered Oct 15 '13 at 16:17

ValPar

74
7

I need them to work independently of each other I am trying to keep it as modular as possible. The reason for the detection is I need to add a progress bar but limit it to one if I don't then I would have multiple on the page. So basically if a directive exists check to see if the other also exists on the page so only one progressbar is applied to the page. – Jesse Oct 15 '13 at 16:21
I also tried attaching a $scope.directives as to a controller and that did not work either for some reason when you log the variable it shows a length of 1 – Jesse Oct 15 '13 at 16:25
I think its an issue with the directive maybe, I tried changing the variables the filechange data var is registering but the dropzone one is not, is it maybe a sequence issue like the variable is not being set by the time I try to reference it? I logged out the "data" service "filechange is there but dropzone is not" – Jesse Oct 16 '13 at 15:08

score 0 · Answer 2 · answered Oct 15 '13 at 16:23

0

I think it's because you aren't instantiating the directives array anywhere - when you are calling it from your service it is returning an empty array and inserting your directive into it.

Try this:

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

    var directives = [];

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

        return this;

    }

   }

});

answered Oct 15 '13 at 16:23

B Cotter

951
5
7

I will try that see if it works. my "filechange" directive is registering but the "dropzone" directive is not. I am not sure why thats happening but when you drill down in the web inspector both of them registered in the var when you try to reference it then its not? Is this a scope issue? – Jesse Oct 16 '13 at 15:10

score 0 · Accepted Answer · edited May 23 '17 at 12:10

Seeing that you need a progress bar, one option may be to create a separate progressBar directive which optionally requires (?^) dropzone and filechange.

If you go this route here's something that discusses communication in this situation: AngularJS directive controllers requiring parent directive controllers?

and on multiple requires: https://groups.google.com/forum/#!msg/angular/PZLxEKZUy5k/M1_JKF84-MEJ

This could give you some nice separation of responsibilities if it makes sense within your architecture.

If you haven't you might also check out this implementation that doesn't solve your question, but might be useful inside a progressBar directive: http://victorbjelkholm.github.io/ngProgress/

Angular Js Directive communication detecting if another directive is on in the scope

3 Answers3