Unknown provider for directive after build

Question

On a Foundation For Apps web app, I have the following directive in my controller file to trigger some action on scroll:

(function() {
    'use strict';

    angular.module('application').controller('MeetingRoomsCtrl', ['$scope', '$timeout', 'facilities', 'items', '$state', '$window',
        function($scope, $timeout, facilities, items, $state, $window, foundation, ModalFactory, NotificationFactory) {
            // controller code ...
        }
    ])
    .directive('scroll', function($window, $document, $timeout) {
        return function(scope, element, attrs) {
            var grid_content = document.querySelectorAll('.grid-content')[0];
            var stickyFunction = function() {
                // doing stuffs ...
                scope.$apply();
            };
            angular.element(grid_content).bind("scroll", stickyFunction);
        };
    });
})();

Which works great on non minified/built app. But when I build the application using foundation build, I get the following error in the console:

Error: [$injector:unpr] Unknown provider: eProvider <- e <- scrollDirective

Am I missing anything to make this directive works on minified app?

Answer 1

You have to do use the same minification-safe dependency injection syntax in your directive that you are using in the controller. Also there were some injection strings missing in the controller:

(function() {
    'use strict';

    angular.module('application').controller('MeetingRoomsCtrl', ['$scope', '$timeout', 'facilities', 'items', '$state',
        '$window', 'foundation', 'ModalFactory', 'NotificationFactory',
        function($scope, $timeout, facilities, items, $state, $window, foundation, ModalFactory, NotificationFactory) {
            // controller code ...
        }
    ])
    .directive('scroll', ['$window', '$document', '$timeout', function($window, $document, $timeout) {
        return function(scope, element, attrs) {
            var grid_content = document.querySelectorAll('.grid-content')[0];
            var stickyFunction = function() {
                // doing stuffs ...
                scope.$apply();
            };
            angular.element(grid_content).bind("scroll", stickyFunction);
        };
    }]);
})();