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

StackOverflow https://stackoverflow.com/questions/19385989

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.

Was it helpful?

Solution

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/

OTHER TIPS

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;

    }

   }

});

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top