I have created a directive for my application which is mentioned in the following question How do you serve a file for download with AngularJS or Javascript? Directive code is as like below
appModule.directive('fileDownload', function ($compile) {
var fd = {
restrict: 'A',
link: function (scope, iElement, iAttrs) {
scope.$on("downloadFile", function (e, url) {
var iFrame = iElement.find("iframe");
if (!(iFrame && iFrame.length > 0)) {
iFrame = $("<iframe style='position:fixed;display:none;top:-1px;left:-1px;'/>");
iElement.append(iFrame);
}
iFrame.attr("src", url);
});
}
};
return fd;
});
Here scope.$on is used, when I call this event via $scope.$emit or $scope.$broadcast, it is not working. My controller code is like below
function reportsController($scope, $http) {
var self = this;
$scope.$broadcast("downloadFile", 'http://google.com');
$scope.$emit("downloadFile", 'http://google.com');
}
and my html file is as below
<div ng-controller="reportsController" id="repctrl">
<a file-download></a>
</div>
What I am doing wrong here?
@Edit: Added the subscribe ($on) in the compile phase so as to avoid the usage of $timeout in controller. Here you can look the example
I think your controller is being initialized before your directive.. so the $on
starts listening after the $emit
, $broadcast
already happened.
see this plunker
open the console and you can see when the console.logs happen:
controller init happened script.js:16
link happened script.js:7
$scope.test() happened script.js:21
scope.$on happened script.js:9
scope.$on happened
If you initialize the controller with ng-view
or do the emit/broadcast after the directive is created, it should work.