构建后指令的未知提供者

Question

在 Foundation For Apps web 应用程序上，我的控制器文件中有以下指令来触发一些滚动操作：

(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);
        };
    });
})();

这在非 minified/built 应用上效果很好。但是当我使用 foundation build 构建应用程序时，我在控制台中收到以下错误：

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

我是否遗漏了使该指令在缩小的应用程序上运行的任何内容？

Answer 1

您必须在您的指令中使用与您在控制器中使用的相同的缩小安全依赖注入语法。控制器中还缺少一些注入字符串：

(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);
        };
    }]);
})();

构建后指令的未知提供者

Unknown provider for directive after build

angularjs

zurb-foundation-apps